Unknown provider: $modalProvider <- $modal error with AngularJS(好像我有最新的ui-bootstrap版本)
而所有其他人似乎都有一个模态的范围问题,但我似乎不能开始模态,所以我认为这些都不相关。请告诉我,如果我错了,情况如何:
Scope issue in AngularJS using AngularUI Bootstrap Modal
Scope issues with Angular UI 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
如果我仅使用那些基于错误的脚本,似乎就是这样:
Error: Failed to load template: template/modal/window.html Error: Failed to load template: template/modal/backdrop.html
为了简化解释结构等,并将所有的代码粘贴在这里,我已经创建了一个plunker。
http://plnkr.co/edit/yg3G8uKsaHNnfj4yNnJs?p=preview
错误(您可以通过使用控制台打开来测试plunker上的代码可以看到)的错误如下:
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)
如果有任何人可以就我在这里做错什么做出任何洞察。它似乎不是范围问题。更像是一个安装问题,或者是我手动引导应用程序的方式?
如何“注入服务”?
考虑您尝试使用该服务的功能,您应该这样声明:
['$modal',function($modal) { // $modal has been injected here,you can use it }]
编辑:
我现在已经学习了Plunk …它是简单的事情,它揭示了对AngularJS概念的一些误解(控制器,范围等)
此外,它正在使用Bootstrap的3 CSS – 目前与AngularJS Bootstrap不兼容。我已将CSS链接更改为Bootstrap 2。
看看它可以如此简单和有效:
http://plnkr.co/edit/YFuAA5B65NZggd6fxjCh?p=preview
我建议从头到尾仔细研究这份文件:
http://docs.angularjs.org/guide/concepts
这个视频也非常非常好,但是它不能深入了解这些概念:
http://weblogs.asp.net/dwahlin/archive/2013/04/12/video-tutorial-angularjs-fundamentals-in-60-ish-minutes.aspx
基本上,错误信息告诉您正在尝试将服务注入某些东西(在您的情况下为“ModalController”) – 但是未找到该服务。
“我怎么想注射? – 你可能会问答案是:控制器功能中需要的每个参数都是“注入”的“依赖关系” – 而AngularJS“注射器”服务执行此任务。这是“$ scope”参数神奇地收到“范围” – 这是喷油器在幕后工作。
在您的ModalController中,注入器试图满足“$ modalInstance”和“items”依赖关系(删除“$ modalInstance”参数 – 错误消息将更改为“itemsProvider not found”)…
如果您想要接收这样的依赖项,通过注入器的“神奇”工作,您需要创建/声明具有这些名称的服务…(或正确使用“resolve”属性,如同您所尝试的) 。
…但是在这种情况下这根本就不需要了。您只需要访问“项目”,并返回所选项目。您也试图以编程方式关闭/关闭模态。
您可以通过“resolve”属性来解析依赖关系,但是为什么要简单化才能实现什么呢?只需使用“scope”属性,并为模态提供范围 – 它将具有对其属性的访问权限。模态还会自动将“$ close”和“$ dismiss”功能添加到作用域中,以便您可以轻松地使用这些功能。
您正试图通过将属性从主范围传递到模态范围,将其作为服务注入到模态控制器中! :-)你试图将自己的模态实例注入到它的控制器中!
所以,你的主要问题是与美元注射器有关 – 值得研究这是什么注入的事情 – 这是很好的解释在我上面链接的文档。
“注入服务”不像“将变量传递给函数”那么简单。通过“决定”属性,你几乎在那里,但正如我所说 – 真的不需要这个简单的例子。
我创建了另一个Plunker而不使用“scope”,并保持“resolve”…不可能像“items”那样注入“modalInstance”:
'$modalInstance': function() { return modalInstance; }
…因为它在这个时候还是没有定义的…我们可以通过调用$ scope来解决这个问题。在ModalController中关闭$(而不是注入模态)…
…或者,像我一样,通过一个功能注入它非常疯狂,但它的作品:
http://plnkr.co/edit/9AhH6YFBUmhYoUDhvnhQ?p=preview
…我永远不会这样做…这只是为了学习的目的!
最后但并非最不重要的:通过在模板文件中添加ng-controller,您需要两次ModalController …您已经在模态配置中声明了这一点。但是通过模态配置,您可以通过解析器进行依赖注入 – 而通过模板,您没有应用“resolve”事件。
更新:
正如Mahery的评论所指出的那样,$ modalInstance可以通过AngularUI Bootstrap实现在控制器中注入。所以,我们不需要任何努力去“解决”,或者以某种方式使其可用。
这是更新的Plunker:http://plnkr.co/edit/BMfaFAWibHphDlZAkZex?p=preview
事实上,错误发生的主要原因是模板中的“ng-controller”属性。通过这种方式创建的控制器不会收到“AngularUI处理”。只有在模态选项中指定的控制器才会收到$ modalInstance所提供的“处理”