Question

这有点奇怪。当我在网上搜索这个问题时，我看到了许多Google搜索结果和SO解决方案...但似乎没有一个工作！

简而言之，我正在尝试实现AngularUI Bootstrap Modal。我一直收到以下错误：

错误：[$ injector：unpr]未知提供者：$ uibModalInstanceProvider＆lt; - $ uibModalInstance＆lt; - addEntryCtrl

这是我的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>

这是我的控制器：

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',
    });
  };
}]);

最后，这是我的模态代码：

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();
}]);

我尝试过的解决方案：

更新了Angular Bootstrap（版本：0.14.3）和Angular（v1.4.8）
将uibModalInstance更改为modalInstance
将$ uibModalInstance更改为modalInstance
将我的addEntryCtrl放入我的ModalInstance

有什么想法？这已经让我在墙上待了差不多2天了。

*编辑*

我应该注意两件事：

1）当我从addEntry中删除$ uibModalInstance作为依赖项时，我的HTML表单提交按钮工作正常，表单看起来很完美。甚至重定向也会正确发生（提交时）。问题仍然存在：模态仍然停留在屏幕上，并且抛出了$ uibModalInstance未定义的错误。这是有道理的，因为我把它作为一个依赖项删除了但是我显然仍然需要在提交时模态接近。

2）此外，我的应用程序的另一部分中的代码几乎相同。唯一的区别是它通过工厂工作。否则，代码是相同的。因此，我相信我的依赖关系都在那里，版本是正确的。所以。吓坏。奇怪。

谢谢！

Answer 1

找到答案！在与我的朋友进行黑客攻击后，我们发现了答案。我想在这里发帖，以防其他人读到这个。

事实证明，我们的模态窗口中有一个ng-controller，它位于div标签中，包含了模态中的整个html表单。以前，当我们的表单不是模态（它有一个单独的URL）时，这工作正常，但由于某种原因，当它处于模态时会中断。 ng控制器引用了addEntryCtrl。删除后，表格立即生效！

Answer 2

问题是你在两个地方指定一个（或两个）控制器 - 当打开一个模态并在模板内时 - 这是不需要的。 从模板中删除ng-controller ，事情会按预期运行。请保管，它会有效。

Answer 3

事实证明，如果您在html模板中指定控制器（使用ng-controller="..."），则无法解析$uibModalInstance。通过调用$uibModal.open({controller="...", ...})指定控制器将允许它正确解析。

由于您只需要dismiss()和close()方法，因此您可以从$scope（名为$dismiss和$close）获取这些方法，因为那样以实例化控制器的两种方式正确解析。

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

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

Answer 4

您正在尝试引用属于单独模块的控制器。为了使其工作，您需要将辅助模块（addEntry）注入主模块（nav）：

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

Answer 5

当你使用$ uibModal.open（）（见下）并明确指定 controller 名称时，你不应该将指令 ng-controller 放入模板。那会导致错误。查看中没有 ng-controller ！

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

Angular UI Bootstrap模式：[$ injector：unpr]未知提供者：$ uibModalInstanceProvider

5 个答案: