模态窗口问题(未知提供程序:ModalInstanceProvider) [英] Modal Window Issue (Unknown Provider: ModalInstanceProvider)
问题描述
AngularJS 的新手，似乎无法找出此错误的含义.我发现其他一些人也有同样的错误，但他们的问题似乎与我的无关.
New to AngularJS and can't seem to find out what this error means. I've found a few others with the same error but it seems their issues don't correlate to mine.
未知提供者:$modalProvider <- $modal error with AngularJS(好像我有最新的 ui-bootstrap 版本)
Unknown provider: $modalProvider <- $modal error with AngularJS (Seems I've got the latest ui-bootstrap version)
并且所有其他人似乎都存在模态的范围问题，但我似乎无法从模态开始，所以我认为这些不相关.如果我错了，请告诉我是怎么回事:
And all of the others seem to be having scope issues with a modal, yet I can't seem to get the modal to begin with so I'm thinking these aren't related. Please tell me if I'm wrong and how that's the case:
AngularJS 中使用 AngularUI Bootstrap Modal 的范围问题
我从这里获取了 ui-bootstrap-tpls-0.6.0.min.js 脚本:https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files 我什至尝试添加 ui-bootstrap-0.6.0.min.js 脚本以及认为可能需要它.虽然如果我正确阅读它，似乎如果我选择了 ui-bootstrap-0.6.0.min.js 脚本，我还需要在这里获取所有模板 https://github.com/angular-ui/bootstrap/tree/master/template如果我仅根据错误使用该脚本，情况似乎就是这样:
I grabbed the ui-bootstrap-tpls-0.6.0.min.js script from here: https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files and I even tried adding the ui-bootstrap-0.6.0.min.js script as well thinking it was possibly needed. Though if I read it properly, it seems if I chose the ui-bootstrap-0.6.0.min.js script I'd need to also grab all of the templates here https://github.com/angular-ui/bootstrap/tree/master/template
Which seems to be the case if I use only that script based on the errors:
Error: Failed to load template: template/modal/window.html
Error: Failed to load template: template/modal/backdrop.html
我已经创建了一个包含所有内容的 plunker，以便于解释结构等并将所有代码粘贴到此处.
I've created a plunker with everything for simplicity of explaining structure etc and pasting in all the code here.
http://plnkr.co/edit/yg3G8uKsaHNnfj4yNnJs?p=preview
错误(您可以通过在控制台打开的情况下在 plunker 上测试代码来看到)如下:
The error (which you can see by testing the code on plunker with the console open) is the following:
Error: Unknown provider: $modalInstanceProvider <- $modalInstance
at Error (<anonymous>)
at http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:30:24
at Object.c [as get] (http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:27:310)
at http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:30:109
at c (http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:27:310)
at d (http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:27:444)
at Object.instantiate (http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:29:80)
at http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:53:80
at http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:44:136
at m (http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:6:494)
如果有人可以就我在这里做错了什么提供任何见解.这似乎不是范围问题.更像是设置问题，还是我手动引导应用程序的方式?
If anyone can give any insight as to what I may be doing wrong here. It doesn't seem like a scope issue. More like a setup issue or possibly the way I'm manually bootstrapping the app?
推荐答案
您似乎没有将 $modal 服务作为依赖项注入.
It seems you are not injecting the $modal service as a dependency.
如何注入服务"?
考虑您尝试使用该服务的 function...您应该像这样声明它:
Consider the function you are trying to use the service... you should declare it like this:
['$modal', function($modal) {
// $modal has been injected here, you can use it
}]
我现在研究了你 Plunk ......它使简单的事情过于复杂，并揭示了对 AngularJS 概念(控制器、作用域等)的一些误解
I've studied you Plunk now... it is overcomplicating simple things, and reveals some miscomprehensions about AngularJS concepts (controller, scope, etc.)
此外，它使用了 Bootstrap 的 3 CSS - 目前与 AngularJS Bootstrap 不兼容.我已将 CSS 链接更改为 Bootstrap 2.
Also, it was using Bootstrap's 3 CSS - which is not compatible with AngularJS Bootstrap currently. I've changed the CSS link to Bootstrap 2.
看看它如何变得更加简单和有效:http://plnkr.co/edit/YFuAA5B65NZggd6fxjCh?p=preview
See how it can be much much more simple and effective: http://plnkr.co/edit/YFuAA5B65NZggd6fxjCh?p=preview
我建议您从头到尾仔细研究本文档:http://docs.angularjs.org/guide/concepts
I'd recommend studying this document carefully, from start to finish: http://docs.angularjs.org/guide/concepts
这个视频也非常非常好，但是它没有提供对概念的更深入的了解:http://weblogs.asp.net/dwahlin/archive/2013/04/12/video-tutorial-angularjs-fundamentals-in-60-ish-minutes.aspx
This video is also very very good, but it does not provide deeper insight into the concepts: http://weblogs.asp.net/dwahlin/archive/2013/04/12/video-tutorial-angularjs-fundamentals-in-60-ish-minutes.aspx
基本上，错误消息表明您正在尝试将服务注入某物(在您的情况下为ModalController") - 但未找到该服务.
Basically, the error message was telling that you were trying to inject a service into something (the "ModalController", in your case) - but this service was not found.
我是如何尝试注射的?"- 你可能会问.答案是:您在 Controller 函数中需要的每个参数都是要注入"的依赖项"——而 AngularJS注入器"服务执行此任务.这就是$scope"参数神奇地接收scope"的方式——它是在幕后工作的注入器.
"How I was trying to inject?" - you may ask. The answer is: every parameter you require in a Controller function is a "dependency" to be "injected" - and AngularJS "injector" service performs this task. This is how "$scope" parameter magically receives a "scope" - it is the injector working behind the scenes.
在您的 ModalController 中，注入器试图同时满足$modalInstance"和items"依赖项(删除$modalInstance"参数 - 错误消息将更改为itemsProvider not found")...
In you ModalController, the injector was trying to satisfy both the "$modalInstance" and the "items" dependencies (remove the "$modalInstance" parameter - the error message will change to "itemsProvider not found")...
如果您想接收这样的依赖项，通过注入器的神奇"工作，您需要使用这些名称创建/声明服务......(或正确使用resolve"属性，就像您尝试做的那样) ...
If you want to receive dependencies like this, through the "magical" work of the injector, you need to create/declare services with these names... (or properly use the "resolve" attribute as you were trying to do) ...
...但在这种情况下根本不需要.您只想访问项目"，并返回选定的项目.您还试图以编程方式关闭/关闭模式.
...but this is not needed in this case at all. You just want access to "items", and return a selected item. You were also trying to close/dismiss the modal programatically.
您可以通过resolve"属性来解决依赖关系，但是为什么可以通过简单来实现如此复杂的事情呢?只需使用范围"属性，并为模态提供范围 - 它可以访问其属性.modal 还会自动将$close"和$dismiss"函数添加到作用域中，因此您可以轻松使用这些函数.
You could resolve dependencies through the "resolve" attribute, but why complicate so much what can be achieved with simplicity? Just use the "scope" attribute instead, and provide the scope to the modal - it will have access to its properties. The modal also automatically adds "$close" and "$dismiss" functions to the scope, so you can easily use these functions.
您试图通过将属性作为服务注入模态控制器来将属性从主作用域传递到模态作用域！:-) 你试图将自己的模态实例注入到它的控制器中！！！
You were trying to pass attributes from the main scope to the modal scope by injecting them as services into the modal controller! :-) You were trying to inject the own modal instance into its controller!!!
因此，您的主要问题与 $injector 有关 - 值得研究一下 inject 的全部内容 - 在我上面链接的文档中得到了很好的解释.
So, your main issue is related to the $injector - it worths studying what is this inject thing all about - it is well explained in the documented I linked above.
注入服务"并不像将变量传递给函数"那么简单.您几乎可以通过resolve"属性到达那里，但正如我所说的 - 对于这个简单的情况，真的不需要.
"Inject a service" is not as simple as "passing a variable to a function". You were almost there through the "resolve" attribute, but as I've said - really not needed for this simple case.
我在不使用范围"的情况下创建了另一个 Plunker，并保留了解析"……不可能像处理项目"那样注入modalInstance":
I've created another Plunker without using "scope", and keeping the "resolve"... it is not possible to inject the "modalInstance" as we do with "items":
'$modalInstance': function() { return modalInstance; }
...因为此时它仍然是 undefined...我们可以通过在 ModalController 中调用 $scope.$close(而不是注入模态)...
...because it is still undefined at this moment... we could workaround by just calling $scope.$close in the ModalController (and not injecting the modal)...
...或者，像我一样，通过一个函数注入它...非常疯狂，但它有效:
...or, like I did, injecting it through a function... very crazy, but it works:
http://plnkr.co/edit/9AhH6YFBUmhYoUDhvnhQ?p=preview
...我永远不会这样做...只是为了学习目的！
...I would never do like this... it is just for learning purposes!
最后但并非最不重要的一点:通过在模板文件中添加 ng-controller，您需要两次 ModalController...您已经在模态配置中声明了它.但是通过模态配置，您可以通过解析器进行依赖注入 - 而通过模板，您没有应用解析"的东西.
At last but not least: by adding ng-controller in the template file, you are requiring the ModalController twice... you already stated it in the modal configuration. But through the modal configuration, you can have the dependency injection through the resolver - while through the template you don't have the "resolve" thing applied.
正如 Mahery 在评论中指出的那样，$modalInstance 可通过 AngularUI Bootstrap 实现注入控制器.因此，我们不需要任何努力来解决"或以某种方式使其可用.
As pointed in the comments by Mahery, $modalInstance is made available for injection in the controller by AngularUI Bootstrap implementation. So, we don't need any effort ro "resolve" or make it available somehow.
这是更新的 Plunker:http://plnkr.co/edit/BMfaFAWibHphDlZAkZex?p=preview
Here is the updated Plunker: http://plnkr.co/edit/BMfaFAWibHphDlZAkZex?p=preview
确实，发生错误的主要原因是模板中的ng-controller"属性.通过这种方式创建的控制器不会受到AngularUI 处理".只有在模态 options 中指定的控制器接受提供 $modalInstance 的处理"...
Indeed, the error was happening mainly due to the "ng-controller" atttribute in the template. The controller created through this way does not receive the "AngularUI treatment". Only the controller specified in the modal options receives the "treatment" where $modalInstance is provided...
这篇关于模态窗口问题(未知提供程序:ModalInstanceProvider)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
