模态窗口问题（未知提供者：ModalInstanceProvider） [英] Modal Window Issue (Unknown Provider: ModalInstanceProvider)
问题描述
新建AngularJS，似乎无法找出这个错误的意思。我发现了一些其他有同样的错误，但似乎他们的问题没有关联到我的。
<一个href=\"http://stackoverflow.com/questions/18733680/unknown-provider-modalprovider-modal-error-with-angularjs\">Unknown供应商：$ modalProvider＆LT; - $用AngularJS 模式错误（我似乎已经得到了最新的用户界面，引导版本）
和所有其他的似乎具有模态范围的问题，但我似乎无法得到的模式，开始用所以我想这些都没有关系。请告诉我，如果我错了，如何是这样的话：
<一个href=\"http://stackoverflow.com/questions/18716113/scope-issue-in-angularjs-using-angularui-bootstrap-modal\">Scope问题在使用AngularUI引导模态 AngularJS
与角UI模式 范围问题 我从这里抓起 UI的引导，第三方物流企业，0.6.0.min.js 脚本：<一href=\"https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files\">https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files UI的引导-0.6.0.min.js 脚本以及认为它是可能需要的。但如果我正确地读它，它似乎如果我选择了 UI的引导-0.6.0.min.js 剧本我还需要抓住所有的模板这里<一href=\"https://github.com/angular-ui/bootstrap/tree/master/template\">https://github.com/angular-ui/bootstrap/tree/master/template
这似乎是这样的，如果我只使用基于错误的脚本：
错误：无法加载模板：模板/莫代尔/ window.html
错误：无法负荷的模板：模板/莫代尔/ backdrop.html
我创建了一个plunker一切为说明所有code在这里等结构和粘贴的简单性。
<一个href=\"http://plnkr.co/edit/yg3G8uKsaHNnfj4yNnJs?p=$p$pview\">http://plnkr.co/edit/yg3G8uKsaHNnfj4yNnJs?p=$p$pview
错误（您可以通过测试code与控制台打开plunker看到）是：
错误：未知提供商：$ modalInstanceProvider＆LT; - $ modalInstance
在错误（小于匿名＆GT;）
在http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:30:24
在Object.c [如GET（http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:27:310）
在http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:30:109
在C（http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:27:310）
在d（http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:27:444）
在Object.instantiate（http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:29:80）
在http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:53:80
在http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:44:136
在m（http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:6:494）
如果任何人都可以提供任何见解，以什么我可能是错在这里做。它似乎并不像一个范围问题。更像是安装问题或可能我手动自举程序？顺便
看来你是不是注射 $模式服务作为一个依赖。
如何注入服务？
考虑函数您要使用的服务...你应该声明它是这样的：
['$模式'，函数（$模态）{
// $模式已经被注入这里，你可以用它
}]
编辑：
我研究你现在花掉......它过于复杂简单的事情，并揭示了一些miscom prehensions约AngularJS概念（控制器，范围等。）
此外，它使用自举的3的CSS - 这是不符合目前AngularJS引导兼容。我已经改变了CSS链接来引导2。
看看它是如何可以更更加简单而有效：
<一href=\"http://plnkr.co/edit/YFuAA5B65NZggd6fxjCh?p=$p$pview\">http://plnkr.co/edit/YFuAA5B65NZggd6fxjCh?p=$p$pview
我建议你仔细研究这份文件，从开始到结束：
http://docs.angularjs.org/guide/concepts
这视频也非常非常好，但它并没有提供更深入的洞察概念：
<一href=\"http://weblogs.asp.net/dwahlin/archive/2013/04/12/video-tutorial-angularjs-fundamentals-in-60-ish-minutes.aspx\">http://weblogs.asp.net/dwahlin/archive/2013/04/12/video-tutorial-angularjs-fundamentals-in-60-ish-minutes.aspx
基本上，该错误消息告诉您试图注入一个服务弄成（以下简称ModalController，你的情况） - 但没有发现这个服务
怎么我试图注入？ - 你可能会问。答案是：你每次在控制器的功能需要的参数是一个依赖被注入 - 和AngularJS注射器的服务执行此任务。这就是$范围参数神奇地接收到一个范围 - 这是喷油器的幕后工作。
在你ModalController，注射器试图同时满足$ modalInstance和项目的依赖关系（去掉$ modalInstance参数 - 错误信息更改为itemsProvider找不到）...
如果您想收到的依赖这样，通过喷油器的神奇的工作，你需要创建/使用这些名称申报服务（或正确使用解析为你要做的属性）...
...但这不是在这种情况下，需要在所有。你只是想获得项目，并返回一个选定的项目。你还试图以编程方式关闭/关闭该模式。
您可以通过化解属性解决依赖关系，但是为什么复杂化了这么多东西可以简单实现？只需使用scope属性，而是和提供范围的模式 - 这将有机会获得其属性。该模式还自动添加$关闭和$辞退功能的范围，所以你可以很容易地使用这些功能。
您正试图通过注入它们作为服务进模态控制器通过从范围主要模态scope属性！ :-)你试图自己的模式实例注入到它的控制器！
那么，你的主要问题是关系到 $注射器 - 这一点，实在值得学习，这是什么注射的事情所有 - 这是很好的解释在记录我上面链接。
注入一个服务是不作为传递一个变量的函数一样简单。你是几乎没有通过解析属性，但正如我已经说过了 - 真的不需要这个简单的例子
我已经创造了另一个Plunker不使用范围，并保持决心......这是不可能注入modalInstance为我们做项目：
'$ modalInstance'：函数（）{返回modalInstance; }
...因为它仍然是未定义在这一刻......我们可以通过只调用 $范围的解决方法。$关闭在ModalController（而不是注射模态）...
...或者，像我一样，注射它通过一个函数......很疯狂，但它的作品：
<一个href=\"http://plnkr.co/edit/9AhH6YFBUmhYoUDhvnhQ?p=$p$pview\">http://plnkr.co/edit/9AhH6YFBUmhYoUDhvnhQ?p=$p$pview
...我绝不会做这样的......它只是一个学习的目的！
最后但并非最不重要：通过添加 NG-控制器在模板文件，你需要的ModalController两次......你已经说，它的模式配置。但通过模式的配置，可以通过解析器有依赖注入 - 当通过模板你没有应用的决心的事情不要
更新：
作为由Mahery评论中指出， $ modalInstance 是注射用AngularUI引导执行控制器提供。所以，我们不需要RO解决，或使其以某种方式提供的任何努力。
下面是更新Plunker：<一href=\"http://plnkr.co/edit/BMfaFAWibHphDlZAkZex?p=$p$pview\">http://plnkr.co/edit/BMfaFAWibHphDlZAkZex?p=$p$pview
事实上，错误已发生主要是由于在模板中的NG控制器atttribute。通过这种方式创建的控制器没有收到AngularUI待遇。只有在模式的选项指定的控制器接收其中设置 $ modalInstance 的待遇......
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.
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:
Scope issue in AngularJS using AngularUI Bootstrap Modal
Scope issues with Angular UI modal
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
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
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?
It seems you are not injecting the $modal service as a dependency.
How to "inject a service"?
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
}]
Edit:
I've studied you Plunk now... it is overcomplicating simple things, and reveals some miscomprehensions about AngularJS concepts (controller, scope, etc.)
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.
See how it can be much much more simple and effective: http://plnkr.co/edit/YFuAA5B65NZggd6fxjCh?p=preview
I'd recommend studying this document carefully, from start to finish: http://docs.angularjs.org/guide/concepts
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
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.
"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.
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")...
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.
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!!!
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.
"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.
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; }
...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!
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.
Update:
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.
Here is the updated Plunker: http://plnkr.co/edit/BMfaFAWibHphDlZAkZex?p=preview
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屋！
