AngularJS:$ injector:使用ngAnimate时出现unpr错误

时间:2014-10-02 10:11:50

标签: javascript angularjs

我正在尝试将ngAnimate添加到我的角度应用依赖项中。这是我的角度应用程序文件:

var carApp = angular.module("carApp", ["ngAnimate"]);

这是我的TableBodyCtrl控制器:

carApp.controller("TableBodyCtrl", function($scope, $http){
    $scope.loading = false;
    ...
});

这是我的TablePanelCtrl

carApp.controller("TablePanelCtrl", function(){
    this.tab = 1;
    ...
});

我的控制器位于controller文件夹中的不同文件中。

以下是角度库的脚本加载:

<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-animate.min.js"></script> 

以下是我的角度应用文件的脚本加载:

<script type="text/javascript" src="js/carApp.js"></script>

以下是我的控制器的脚本加载:

<script type="text/javascript" src="js/controllers/TablePanelCtrl.js"></script>
<script type="text/javascript" src="js/controllers/TableBodyCtrl.js"></script>

当我运行我的网络应用程序时,我收到此错误:

Unknown provider: $$qProvider <- $$q <- $animate <- $compile

https://docs.angularjs.org/error/$injector/unpr?p0=$$qProvider%20%3C-%20$$q%20%3C-%20$animate%20%3C-%20$compile

在我将"ngAnimate"添加到我的角度应用依赖项后,此错误才开始显示。

我该如何解决?

4 个答案:

答案 0 :(得分:34)

我遇到了同样的错误,并且弄明白了为什么会这样。

根本原因是我依赖于&#34; angular-animate&#34;:&#34; ~1.3.0&#34;所以bower正在使用Angular v1.3,即使项目的其余部分是取决于Angular 1.2。

只需使用

"angular-animate": "~1.2.0"

而不是

"angular-animate": "~1.3.0"
在你的bower.json文件中

。在bower install之后一切都应该有效!

这里的答案相同:https://stackoverflow.com/a/26596023/2171509

答案 1 :(得分:5)

我有同样的问题,由

解决
bower update.

答案 2 :(得分:2)

我已设置与您在此 plnkr 中提供的完全相同的设置,

那里没有错误。你正在做的是正确的。

使用&#39; ngAnimate&#39;创建文件的顺序和模块。作为依赖

var carApp = angular.module("carApp", ["ngAnimate"]);

是正确的方法。

Altough,请记住一点:

来自Angularjs docs

  

您可以指向两种类型的角度脚本网址,一种用于   开发和生产:

     

angular.js - 这是人类可读的非缩小版本,   适合网站开发。 angular.min.js - 这是缩小的   版本,我们强烈建议您在生产中使用。

与angular-animate.js相同。

这将有助于您进行开发,同时它会向您显示更好的错误报告。

另一点是即使使用缩小的angularjs版本,您也可以获得“长描述性”版本的链接。错误信息,通过查看您提供的错误消息的 link ,我看到了这一点:

  

未知的提供程序错误也可能是由于意外造成的   使用angular.module API重新定义模块,如下所示   以下示例。

angular.module('myModule', [])
.service('myCoolService', function () { /* ... */ });

angular.module('myModule', [])
// myModule has already been created! This is not what you want!
.directive('myDirective', ['myCoolService', function (myCoolService) {
  // This directive definition throws unknown provider, because myCoolService
  // has been destroyed.
}]);
     

要解决此问题,请确保在整个过程中仅使用angular.module(name,[requires])语法定义每个模块   项目。检索它以便随后使用angular.module(name)。该   固定示例如下所示。

angular.module('myModule', [])
.service('myCoolService', function () { /* ... */ });

angular.module('myModule')
.directive('myDirective', ['myCoolService', function (myCoolService) {
  // This directive definition does not throw unknown provider.
}]);

答案 3 :(得分:0)

我遇到了同样的问题,原因似乎是这些库的版本之间存在冲突。

AngularJS v1.3.14更新为v 1.2后,我没有看到此错误。尝试不同的版本&amp;检查它们的兼容性。