Angular UI Bootstrap Modal:[$injector:unpr] 未知提供者:$uibModalInstanceProvider [英] Angular UI Bootstrap Modal: [$injector:unpr] Unknown provider: $uibModalInstanceProvider
问题描述
这有点奇怪.当我在网上搜索这个问题时，我看到很多页面的 Google 结果和 SO 解决方案……但似乎都没有！
简而言之，我正在尝试实现 AngularUI Bootstrap Modal.我不断收到以下错误:
<块引用>错误:[$injector:unpr] 未知提供者:$uibModalInstanceProvider <- $uibModalInstance <- addEntryCtrl
这是我的 HTML:
</nav>
这是我的控制器:
var app = angular.module('nav', ['ui.bootstrap']);app.controller('navCtrl', ['$scope', '$uibModal', function($scope, $uibModal) {$scope.open = function() {var uibModalInstance = $uibModal.open({动画:真实，templateUrl: 'addEntry/addEntry.html',控制器:'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) 另外，我在我的应用程序的另一部分有几乎相同的代码.唯一的区别是它是通过工厂工作的.否则，代码是相同的.因此，我相信我的依赖项都在那里并且版本是正确的.所以.吓死人了奇怪.
谢谢！
找到答案！在和我的朋友一起破解之后，我们找到了答案.我想把它贴在这里以防其他人看到这个.
事实证明，我们的模态窗口中有一个 ng-controller，它位于 div 标签中，该标签包裹了模态中的整个 html 表单.以前，当我们的表单不在模态中时(它有一个单独的 URL)，这工作得很好，但由于某种原因，它在模态中时会中断.ng-controller 正在引用 addEntryCtrl.删除它后，表单立即生效！
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:
Error: [$injector:unpr] Unknown provider: $uibModalInstanceProvider <- $uibModalInstance <- addEntryCtrl
Here is my 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)
- changed uibModalInstance to modalInstance
- changed $uibModalInstance to modalInstance
- put my addEntryCtrl inside my ModalInstance
Any thoughts? This has been driving me up the wall for almost 2 days now.
* 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.
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!
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!
这篇关于Angular UI Bootstrap Modal:[$injector:unpr] 未知提供者:$uibModalInstanceProvider的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
