Angular UI Bootstrap 型号：[$injector:unpr] 未知提供者：$uibModalInstance 提供者

Question

这有点奇怪。当我在网上搜索这个问题时，我看到很多页的 Google 结果和 SO 解决方案......但是 none 似乎有效！

简而言之，我正在尝试实现 AngularUI Bootstrap 模式。我不断收到以下错误：

Error: [$injector:unpr] Unknown provider: $uibModalInstanceProvider <- $uibModalInstance <- 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

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

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

Answer 2

已找到答案！在和我的朋友一起砍掉之后，我们找到了答案。我想 post 放在这里，以防其他人看到。

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

Answer 3

问题是您在 2 个地方指定了一个（或两个）控制器——当打开模式时和在模板内——这是不需要的。 从模板中删除 ng-controller 一切都会像 expected.Trust 我一样工作，它会工作。

Answer 4

事实证明，如果您在 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 5

当您使用 $uibModal.open()（见下文）并明确指定 controller 名称时，您不应将指令 ng -controller 在模板中。那导致错误。在 View 中没有 ng-controller ！

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

Angular UI Bootstrap 型号：[$injector:unpr] 未知提供者：$uibModalInstance 提供者

Angular UI Bootstrap Modal: [$injector:unpr] Unknown provider: $uibModalInstanceProvider

angularjs

angular-ui-bootstrap

angular-bootstrap

angular-ui-modal