20

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

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

而所有其他人似乎都存在模态范围问题，但我似乎无法从模态开始，所以我认为这些不相关。如果我错了，请告诉我这是怎么回事：

使用 AngularUI Bootstrap 模态的 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

为了简单地解释结构等并在此处粘贴所有代码，我创建了一个包含所有内容的 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)

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

4

4 回答 4

34

看来您没有将$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”） - 但未找到此服务。

“我是怎么注射的？” - 你可能会问。答案是：控制器函数中需要的每个参数都是要“注入”的“依赖项”——AngularJS 的“注入器”服务执行此任务。这就是“$scope”参数神奇地接收“范围”的方式——它是在幕后工作的注入器。

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

如果您想通过注入器的“神奇”工作接收这样的依赖项，您需要使用这些名称创建/声明服务......（或者像您尝试做的那样正确使用“resolve”属性）.. .

...但在这种情况下根本不需要这样做。您只想访问“项目”，并返回选定的项目。您还试图以编程方式关闭/关闭模式。

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

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

因此，您的主要问题与$injector- 值得研究一下这个注入的东西是什么 - 它在我上面链接的文档中得到了很好的解释。

“注入服务”并不像“将变量传递给函数”那么简单。您几乎可以通过“解决”属性到达那里，但正如我所说 - 这个简单的案例真的不需要。

我在不使用“范围”的情况下创建了另一个 Plunker，并保持“解析”......不可能像使用“项目”那样注入“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......

于 2013-10-06T05:25:15.427 回答
3

我已将 J. Bruni 的 Plunker 改编为与 Bootstrap3 一起使用。你可以在这里找到它：

http://plnkr.co/edit/sgT87KEubgcWkrEfhTRz?p=preview

请注意，从 ui-bootstrap 0.7.0 开始，bootstrap3 支持将是本机的，并且应修复有关模式（和其他指令，例如进度条）的任何问题。

于 2013-10-31T10:10:33.277 回答
3

  1. 如果您在打开时以及在模板中提供控制器名称，那么您将收到相同的错误。

  2. 从模板中删除 ng-controller

快乐编码

于 2015-08-25T20:41:55.623 回答
1

我得到了同样的错误。通过在通过 $modal 提供控制器的同时从模板中删除 ng-controller，您可以解决此问题。

$modal.open({
            templateUrl: 'MyView.html',
            controller: 'MyViewController'

        });
于 2016-02-10T07:32:32.077 回答