角UI引导模式:[$injector:unpr]未知提供者:$uibModalInstanceProvider。

This is a bit strange. When I search this issue online I see many pages of Google results and SO solutions... but none seem to work!

这有点奇怪。当我在网上搜索这个问题时，我看到了很多谷歌的结果和解决方案……但似乎没有人能工作!

In a nutshell, I am trying to implement AngularUI Bootstrap Modal. I keep getting the following error:

简单地说，我正在尝试实现AngularUI Bootstrap模式。我一直得到以下错误:

Error: [$injector:unpr] Unknown provider: $uibModalInstanceProvider <- $uibModalInstance <- addEntryCtrl

错误:[$injector:unpr]未知提供者:$uibModalInstanceProvider <- $uibModalInstance <- addEntryCtrl。

Here is my HTML:

这是我的HTML:

<nav class="navbar navbar-default">
  <div class="container">
    <span class="nav-col" ng-controller="navCtrl" style="text-align:right">
      <a class="btn pill" ng-click="open()" aria-hidden="true">Add New</a>
    </span>
  </div>
</nav>

Here is my controller:

这是我的控制器:

var app = angular.module('nav', ['ui.bootstrap']);

app.controller('navCtrl', ['$scope', '$uibModal', function($scope, $uibModal) {
  $scope.open = function() {
    var uibModalInstance = $uibModal.open({
      animation: true,
      templateUrl: 'addEntry/addEntry.html',
      controller: 'addEntryCtrl',
    });
  };
}]);

And finally, here is my modal code:

最后，这是我的模式代码:

var app = angular.module('addEntry', ['firebase', 'ui.bootstrap']);

app.controller('addEntryCtrl', ['$scope', '$firebaseObject', '$state', '$uibModalInstance', function($scope, $firebaseObject, $state, $uibModalInstance) {
  $scope.cancel = function() {
    $uibModalInstance.dismiss('cancel');
  };

  $uibModalInstance.close();
}]);

Solutions I've tried:

我试过解决方案:

updated both Angular Bootstrap (Version: 0.14.3) and Angular (v1.4.8)
更新了两个角度引导(版本:0.14.3)和角度(v1.4.8)
changed uibModalInstance to modalInstance
改变uibModalInstance modalInstance
changed $uibModalInstance to modalInstance
改变美元uibModalInstance modalInstance
put my addEntryCtrl inside my ModalInstance
将我的addEntryCtrl放在ModalInstance中。

Any thoughts? This has been driving me up the wall for almost 2 days now.

任何想法吗?这已经把我逼疯了2天了。

* EDIT *

*编辑*

I should note two things:

我要注意两点:

1) when I remove $uibModalInstance as a dependency from addEntry, my HTML form submit buttons work just fine and the form looks perfect. Even the redirect occurs correctly (upon submission). The problem remains: the modal still stays on the screen and an error is thrown that $uibModalInstance is undefined. This makes sense since I removed it as a dependency but I obviously still need the modal is close upon submission.

1)当我删除$uibModalInstance作为addEntry的依赖项时，我的HTML表单提交按钮工作正常，表单看起来很完美。即使是重定向也会正确地发生(在提交时)。问题仍然存在:模态仍然停留在屏幕上，并且错误被抛出，$uibModalInstance是未定义的。这是有意义的，因为我把它作为依赖项删除了，但是我显然仍然需要在提交时关闭模态。

2) Also, I have almost identical code working in another part of my app. The only difference there is that it's working via a factory. Otherwise, the code is identical. Thus, I am confident my dependencies are all there and versions are correct. So. Freaking. Strange.

另外，我的应用程序的另一部分也有几乎相同的代码，唯一的区别是它是通过工厂工作的。否则，代码是相同的。因此，我确信我的依赖项都在那里，并且版本是正确的。所以。觉得很奇怪。奇怪。

Thanks!

谢谢!

5 个解决方案

#1

Answer Found! After hacking away with my friend, we discovered the answer. I wanted to post it here just in case someone else reads this.

回答发现!在和我的朋友进行了黑客攻击之后，我们发现了答案。我想把它贴在这里以防别人看到。

It turns out that we had an ng-controller in our modal window that was in a div tag that wrapped the entire html form that was in the modal. Previously, this worked fine when our form was NOT in a modal (it had a separate URL) but for some reason it breaks when it is in a modal. The ng-controller was referencing the addEntryCtrl. Immediately after removing it, the form worked!

结果是，我们的模态窗口中有一个ng-控制器，它位于一个div标签中，它将整个html表单包装在模态中。以前，当我们的表单不是在模态(它有一个单独的URL)时，这样做很正常，但是出于某种原因，它在模态的时候会中断。ng-controller引用了addEntryCtrl。删除后立即生效!

#2

The problem was that you were specifying a (or double) controller(s) in 2 places- when opening a modal and inside a template - this is not needed. Remove ng-controller from a template and things will work as expected.Trust me,it will work.

问题是您在两个地方指定了一个(或双)控制器——在打开模式和模板内部时——这是不需要的。从模板中移除ng-控制器，事情将按预期工作。相信我,它会工作。

#3

It turns out that if you specify the controller inside the html template (with ng-controller="...") it will not resolve the $uibModalInstance. Specifying the controller from the call to $uibModal.open({controller="...", ...}) will allow it to resolve correctly.

如果您在html模板中指定控制器(使用ng-controller=“…”)，它将不会解析$uibModalInstance。指定控制器从调用$ uibmod .open({controller="…“，……})将允许它正确地解决。

Since you only need the dismiss() and close() methods, you can get them from $scope (named $dismiss and $close) instead, since that will resolve correctly in both ways of instantiating the controller.

因为您只需要撤销()和close()方法，您就可以从$scope中获得它们(被命名为$ cancel和$close)，因为这将正确地解决实例化控制器的两种方法。

var app = angular.module('addEntry', ['ui.bootstrap']);
app.controller('addEntryCtrl', ['$scope', function($scope) {
    $scope.cancel = function() {
        $scope.$dismiss('cancel');
    };

    $scope.$close();
}]);

#4

You are trying to reference a controller that is part of a separate module. In order for this to work, you need to inject your secondary module (addEntry) into your main module (nav):

您正在尝试引用一个控制器，该控制器是独立模块的一部分。为了使其工作，您需要将辅助模块(addEntry)注入您的主模块(nav):

var app = angular.module('nav', ['ui.bootstrap', 'addEntry']);

#5

As you use $uibModal.open() (see lower) and specify explicitly the controller name, you shouldn't put the directive ng-controller in the template. That cause the error. No ng-controller in the View !

当您使用$ uibmod .open()(请参阅下面)并明确指定控制器名称时，您不应该在模板中放置指令ng-controller。导致错误。视图中没有ng控制器!

 var uibModalInstance = $uibModal.open({
  animation: true,
  templateUrl: 'addEntry/addEntry.html',
  controller: 'addEntryCtrl',
});

#1