Question

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

Unknown provider: $modalProvider <- $modal error with AngularJS（似乎我有最新的ui-bootstrap版本）

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

Scope issue in AngularJS using AngularUI Bootstrap 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)

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

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”）... < / p>

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

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

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

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

所以，你的主要问题与$injector有关 - 值得研究这个注入事情的全部内容 - 在我上面链接的文档中对它进行了很好的解释。

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

我在没有使用“范围”的情况下创建了另一个Plunker，并保持“解析”......不可能像我们对“items”一样注入“modalInstance”：

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

...因为此时它仍然是undefined ...我们可以通过调用ModalController中的$scope.$close（而不是注入模态）来解决...

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

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

......我绝不会这样做......这只是为了学习目的！

最后但并非最不重要：通过在模板文件中添加ng-controller，您需要两次ModalController ...您已经在模态配置中说明了它。但是通过模态配置，您可以通过解析器进行依赖注入 - 而通过模板，您没有应用“解析”事物。

更新

正如Mahery的评论所指出的，$modalInstance可通过AngularUI Bootstrap实现在控制器中注入。因此，我们不需要任何努力来“解决”或以某种方式使其可用。

以下是更新的Plunker：http://plnkr.co/edit/BMfaFAWibHphDlZAkZex?p=preview

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

Answer 2

我改编了J. Bruni的Plunker来使用Bootstrap3。你可以在这里找到它：

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

请注意，从ui-bootstrap开始，0.7.0 bootstrap3支持将是原生的，任何有关模态（以及其他指令，例如进度条）的问题都应该修复。

Answer 3

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

public function getvalue() {
    $db = connectionstart();
     // No need of bracket here
    $sql = "SELECT * FROM user_posts WHERE type='service' LIMIT 3";
    $result = mysql_query($sql);
    // declare an array
    $data = [];
    if($result){
        // loop
        while($row = mysql_fetch_array($result)) {
                 // store data in an array
                 $data[] = $row; 

         }    
    }

    return $data;
}

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

3 个答案:

编辑：

更新