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

如何“注入服务”？

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

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