模态窗口问题（未知提供程序：ModalInstanceProvider）

小编典典

模态窗口问题（未知提供程序：ModalInstanceProvider）

angularjs

AngularJS的新手，似乎无法找出此错误的含义。我发现其他一些人也有相同的错误，但似乎他们的问题与我的问题无关。

未知提供程序：AngularJS中的$ modalProvider <-$
modal错误（似乎我有最新的ui-bootstrap版本）

其他所有问题似乎都与模态有关，但我似乎无法从该模态开始，因此我认为这些问题无关。请告诉我我是否错误以及情况如何：

我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)

如果有人可以对我在这里做错的事情提供任何见解。这似乎不是范围问题。更像是设置问题，或者可能是我手动引导应用程序的方式？

阅读 277

2020-07-04

共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”参数如何神奇地接收“ scope”的原因-注入器在幕后工作。

在您的ModalController中，注入器试图同时满足“ $ modalInstance”和“ items”依赖性（删除“ $
modalInstance”参数-错误消息将更改为“找不到itemsProvider”）…

如果要通过注入器的“神奇”工作接收到这样的依赖关系，则需要使用这些名称来创建/声明服务…（或在尝试时正确使用“ resolve”属性）。。

…但是在这种情况下根本不需要。您只想访问“项目”，然后返回一个选定的项目。您还试图通过编程方式关闭/关闭模态。

您可以通过“ resolve”属性来解决依赖关系，但是为什么要这么简单才能实现那么复杂呢？只需使用“ scope”属性，并为模态提供范围-
它就可以访问其属性。模态还会自动将“ $ close”和“ $ dismiss”函数添加到作用域，因此您可以轻松使用这些函数。

您试图通过将属性作为服务注入到模式控制器中来将属性从主作用域传递到模式作用域！:-)您试图将自己的模态实例注入其控制器中！！！

因此，您的主要问题与$injector-值得研究该注入物的全部内容-在上面链接的文档中有很好的解释。

“注入服务”并不像“将变量传递给函数”那样简单。您几乎可以通过“ resolve”属性到达那里，但是正如我所说的-对于这种简单情况，确实不需要。

我创建了另一个Plunker而不使用“ scope”，并保留了“ resolve” …无法像对“ 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…

2020-07-04