一尘不染

Angular UI Bootstrap模式:[$ injector:unpr]未知提供程序:$ uibModalInstanceProvider

angularjs

这有点奇怪。当我在线搜索此问题时,我看到许多页面的Google搜索结果和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)另外,我在应用程序的另一部分工作的代码几乎相同。唯一的区别是它通过工厂工作。否则,代码是相同的。因此,我确信我的依赖项全部存在并且版本正确。所以。抓狂
奇怪。

谢谢!


阅读 215

收藏
2020-07-04

共1个答案

一尘不染

找到答案!与我的朋友偷走后,我们找到了答案。我想将其发布在这里,以防其他人阅读。

事实证明,我们在模态窗口中有一个ng-
controller,它位于div标签中,该标签包装了模态中的整个html表单。以前,当我们的表单不在模式中时(它具有单独的URL),此方法可以很好地工作,但由于某种原因,在表单中时它会中断。ng-
controller正在引用addEntryCtrl。删除后,该表格立即生效!

2020-07-04