20

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

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

错误：[$injector:unpr] 未知提供者：$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）另外，我在我的应用程序的另一部分工作的代码几乎相同。唯一的区别是它是通过工厂工作的。否则，代码是相同的。因此，我相信我的依赖项都在那里并且版本是正确的。所以。吓坏了。奇怪的。

谢谢！

4

5 回答 5

49

找到答案！在和我的朋友打成一片之后，我们找到了答案。我想把它贴在这里，以防其他人读到这个。

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

于 2015-11-29T07:48:18.950 回答
20

问题是您在 2 个地方指定了一个（或双）控制器 - 打开模式和模板内时 - 这不是必需的。从模板中删除 ng-controller，一切都会按预期工作。相信我，它会工作的。

于 2016-03-05T06:28:20.957 回答
8

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

由于您只需要dismiss()andclose()方法，因此您可以从$scope(named $dismissand $close) 获取它们，因为这将在实例化控制器的两种方式中正确解析。

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

    $scope.$close();
}]);
于 2016-03-16T13:02:45.710 回答
3

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

var app = angular.module('nav', ['ui.bootstrap', 'addEntry']);
于 2015-11-26T04:13:16.313 回答
1

当您使用 $uibModal.open() （见下文）并明确指定控制器名称时，您不应将指令ng-controller放入模板中。这会导致错误。视图中没有ng-controller！

 var uibModalInstance = $uibModal.open({
  animation: true,
  templateUrl: 'addEntry/addEntry.html',
  controller: 'addEntryCtrl',
});
于 2016-12-06T08:55:39.243 回答