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

前端之家收集整理的这篇文章主要介绍了angularjs – 模态窗口问题(未知提供者:ModalInstanceProvider)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
新的AngularJS,似乎无法找出这个错误是什么意思。我发现了其他几个错误,但似乎他们的问题与我的关系不相关。

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服务作为依赖。

如何“注入服务”?

考虑您尝试使用该服务的功能,您应该这样声明:

['$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所提供的“处理”

猜你在找的Angularjs相关文章