模态窗口问题(未知提供者:ModalInstanceProvider)

Question

AngularJS的新功能,似乎无法找出此错误的含义.我发现其他一些人有同样的错误,但似乎他们的问题与我的问题无关.

未知的提供者:$ modalProvider < - AngularJS的$ modal错误(似乎我有最新的ui-bootstrap版本)

所有其他人似乎都有模态的范围问题,但我似乎无法开始模态,所以我认为这些不相关.请告诉我,如果我错了,情况如何:

使用AngularUI Bootstrap Modal在AngularJS中的范围问题

Angular UI模式的范围问题

我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

我已经创建了一个包含所有内容的插件,以简化解释结构等,并在此处粘贴所有代码.

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)

如果有人能够对我在这里做错了什么有所了解.它似乎不是范围问题.更像是设置问题,还是我手动引导应用程序的方式？

Answer 1

看来你没有将$modal服务注入依赖项.

如何"注入服务"？

考虑一下function你正在尝试使用该服务......你应该这样声明:

['$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") - 但未找到此服务.

"我怎么试图注射？" - 你可能会问.答案是:在Controller函数中需要的每个参数都是"依赖"以"注入" - 并且AngularJS"注入器"服务执行此任务.这就是"$ scope"参数神奇地接收"范围"的方式 - 它是在幕后工作的注入器.

在你的ModalController中,注入器试图满足"$ modalInstance"和"items"依赖项(删除"$ modalInstance"参数 - 错误消息将更改为"itemsProvider not found")...

如果你想通过注入器的"神奇"工作来接收这样的依赖关系,你需要使用这些名称来创建/声明服务......(或者正如你试图的那样正确使用"resolve"属性). .

......但在这种情况下根本不需要这样做.您只想访问"项目",并返回所选项目.您还试图以编程方式关闭/关闭模态.

您可以通过"resolve"属性解决依赖关系,但是为什么简单可以实现的复杂化呢？只需使用"scope"属性,并将范围提供给模态 - 它将可以访问其属性.模态还会自动向范围添加"$ close"和"$ dismiss"功能,因此您可以轻松使用这些功能.

您试图将属性从主范围传递到模态范围,方法是将它们作为服务注入模态控制器!:-)你试图将自己的模态实例注入其控制器!

所以,你的主要问题是$injector- 它值得研究这个注入事物的全部内容 - 它在上面链接的文档中得到了很好的解释.

"注入服务"并不像"将变量传递给函数"那么简单.你几乎已经通过"resolve"属性,但正如我所说的 - 这个简单的案例真的不需要.

我创建了另一个不使用"范围"的Plunker,并保持"解析"......不可能像我们对"items"一样注入"modalInstance":

'$modalInstance': function() { return modalInstance; }

...因为它现在还在undefined......我们可以通过调用$scope.$closeModalController(而不是注入模态)来解决...

......或者,就像我一样,通过一个函数注入它...非常疯狂,但它有效:

http://plnkr.co/edit/9AhH6YFBUmhYoUDhvnhQ?p=preview

......我永远不会这样做......这只是为了学习目的!

最后但同样重要的是:通过添加ng-controller模板文件,您需要两次ModalController ...您已经在模态配置中说明了它.但是通过模态配置,您可以通过解析器进行依赖注入 - 而通过模板,您没有应用"解析".

更新:

正如Mahery的评论所指出的,$modalInstanceAngularUI Bootstrap实现可以在控制器中注入.因此,我们不需要任何努力来"解决"或以某种方式使其可用.

这是更新的Plunker:http://plnkr.co/edit/BMfaFAWibHphDlZAkZex？p = preview

实际上,错误的发生主要是由于模板中的"ng-controller"附加.通过这种方式创建的控制器不会收到"AngularUI处理".只有模态选项中指定的控制器$modalInstance才会收到"处理" ...