引导轮播显示全部图像一次与错误，当我用NG-重复

问题描述

我想加一个旋转木马（）到我的引导3网站。但是，所有图像都显示在同一次错误。

当我创建一个旋转木马样本项目（）code将其工作正常。

我的模块看起来像下面

  VAR应用= angular.module（'MyApp的'，['ngRoute'，'angularFileUpload'，'LocalStorageModule，角装吧']）;
 

而且，对于传送带需要下面。

  angular.module（'ui.bootstrap.demo'，['ngAnimate'，'ui.bootstrap']）;
 

所以，当我加入上述2到我的项目

  VAR应用= angular.module（'MyApp的'，['ngRoute'，'ngAnimate'，'ui.bootstrap'，'angularFileUpload'，'LocalStorageModule，角装-酒吧']）;
 

我收到以下错误。

<一个href=\"https://docs.angularjs.org/error/$injector/modulerr?p0=myApp&p1=Error:%20%5B$injector:modulerr%5D%20http:%2F%2Ferrors.angularjs.org%2F1.2.16%2F$injector%2Fmodulerr%3Fp0%3DngAnimate%26p1%3DError%253A%2520%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.2.16%252F%2524injector%252Fnomod%253Fp0%253DngAnimate%250A%2520%2520%2520%2520at%2520Error%2520(native)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A26264%252Fscripts%252Fangular.min.js%253A6%253A450%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A26264%252Fscripts%252Fangular.min.js%253A20%253A260%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A26264%252Fscripts%252Fangular.min.js%253A21%253A262%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A26264%252Fscripts%252Fangular.min.js%253A33%253A1%250A%2520%2520%2520%2520at%2520Array.forEach%2520(native)%250A%2520%2520%2520%2520at%2520q%2520(http%253A%252F%252Flocalhost%253A26264%252Fscripts%252Fangular.min.js%253A7%253A280)%250A%2520%2520%2520%2520at%2520e%2520(http%253A%252F%252Flocalhost%253A26264%252Fscripts%252Fangular.min.js%253A32%253A445)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A26264%252Fscripts%252Fangular.min.js%253A33%253A18%250A%2520%2520%2520%2520at%2520Array.forEach%2520(native)%0A%20%20%20%20at%20Error%20(native)%0A%20%20%20%20at%20http:%2F%2Flocalhost:26264%2Fscripts%2Fangular.min.js:6:450%0A%20%20%20%20at%20http:%2F%2Flocalhost:26264%2Fscripts%2Fangular.min.js:33:332%0A%20%20%20%20at%20Array.forEach%20(native)%0A%20%20%20%20at%20q%20(http:%2F%2Flocalhost:26264%2Fscripts%2Fangular.min.js:7:280)%0A%20%20%20%20at%20e%20(http:%2F%2Flocalhost:26264%2Fscripts%2Fangular.min.js:32:445)%0A%20%20%20%20at%20http:%2F%2Flocalhost:26264%2Fscripts%2Fangular.min.js:33:18%0A%20%20%20%20at%20Array.forEach%20(native)%0A%20%20%20%20at%20q%20(http:%2F%2Flocalhost:26264%2Fscripts%2Fangular.min.js:7:280)%0A%20%20%20%20at%20e%20(http:%2F%2Flocalhost:26264%2Fscripts%2Fangular.min.js:32:445\" rel=\"nofollow\">https://docs.angularjs.org/error/$injector/modulerr?p0=myApp&p1=Error:%20%5B$injector:modulerr%5D%20http:%2F%2Ferrors.angularjs.org%2F1.2.16%2F$injector%2Fmodulerr%3Fp0%3DngAnimate%26p1%3DError%253A%2520%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.2.16%252F%2524injector%252Fnomod%253Fp0%253DngAnimate%250A%2520%2520%2520%2520at%2520Error%2520(native)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A26264%252Fscripts%252Fangular.min.js%253A6%253A450%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A26264%252Fscripts%252Fangular.min.js%253A20%253A260%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A26264%252Fscripts%252Fangular.min.js%253A21%253A262%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A26264%252Fscripts%252Fangular.min.js%253A33%253A1%250A%2520%2520%2520%2520at%2520Array.forEach%2520(native)%250A%2520%2520%2520%2520at%2520q%2520(http%253A%252F%252Flocalhost%253A26264%252Fscripts%252Fangular.min.js%253A7%253A280)%250A%2520%2520%2520%2520at%2520e%2520(http%253A%252F%252Flocalhost%253A26264%252Fscripts%252Fangular.min.js%253A32%253A445)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A26264%252Fscripts%252Fangular.min.js%253A33%253A18%250A%2520%2520%2520%2520at%2520Array.forEach%2520(native)%0A%20%20%20%20at%20Error%20(native)%0A%20%20%20%20at%20http:%2F%2Flocalhost:26264%2Fscripts%2Fangular.min.js:6:450%0A%20%20%20%20at%20http:%2F%2Flocalhost:26264%2Fscripts%2Fangular.min.js:33:332%0A%20%20%20%20at%20Array.forEach%20(native)%0A%20%20%20%20at%20q%20(http:%2F%2Flocalhost:26264%2Fscripts%2Fangular.min.js:7:280)%0A%20%20%20%20at%20e%20(http:%2F%2Flocalhost:26264%2Fscripts%2Fangular.min.js:32:445)%0A%20%20%20%20at%20http:%2F%2Flocalhost:26264%2Fscripts%2Fangular.min.js:33:18%0A%20%20%20%20at%20Array.forEach%20(native)%0A%20%20%20%20at%20q%20(http:%2F%2Flocalhost:26264%2Fscripts%2Fangular.min.js:7:280)%0A%20%20%20%20at%20e%20(http:%2F%2Flocalhost:26264%2Fscripts%2Fangular.min.js:32:445

修改：指经过以下

 ＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js\"></script>
＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js\"></script>
＆LT;脚本的src =// angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js\"></script>
 

我收到以下错误。

 行：4442
错误：[$喷油器：CDEP]循环依赖发现：$ HTTP＆LT;  -  $ templateRequest＆LT;  -  $$ animateQueue＆LT;  -  $有生＆LT;  -  cfpLoadingBar＆LT;  -  $ HTTP＆LT;  -  authService
http://errors.angularjs.org/1.4.7/$injector/cdep?p0=%24http%20%3C-%20%24templateRequest%20%3C-%20%24%24animateQueue%20%3C-%20%24animate%20%3C-%20cfpLoadingBar%20%3C-%20%24http%20%3C-%20authService
 

解决方案

据堆栈跟踪，角没有找到该模块 ngAnimate 。你可能忘了您的 index.html的的页面。

链接角动画脚本

的index.html

 ＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js\"></script>
＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js\"></script>
＆LT;脚本的src =// angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js\"></script>
 

I'm trying to add a carousel(http://angular-ui.github.io/bootstrap/#/carousel) to my Bootstrap 3 website. But, All images are showing at once with the error.

When i create a sample project with carousel(http://angular-ui.github.io/bootstrap/#/carousel) code it is working fine.

My module looks like below

var app = angular.module('myapp', ['ngRoute', 'angularFileUpload', 'LocalStorageModule', 'angular-loading-bar']);

And, for carousel requires below.

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);

So when i add above 2 into my project

var app = angular.module('myapp', ['ngRoute', 'ngAnimate', 'ui.bootstrap', 'angularFileUpload', 'LocalStorageModule', 'angular-loading-bar']);

i am getting below error.

https://docs.angularjs.org/error/$injector/modulerr?p0=myApp&p1=Error:%20%5B$injector:modulerr%5D%20http:%2F%2Ferrors.angularjs.org%2F1.2.16%2F$injector%2Fmodulerr%3Fp0%3DngAnimate%26p1%3DError%253A%2520%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.2.16%252F%2524injector%252Fnomod%253Fp0%253DngAnimate%250A%2520%2520%2520%2520at%2520Error%2520(native)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A26264%252Fscripts%252Fangular.min.js%253A6%253A450%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A26264%252Fscripts%252Fangular.min.js%253A20%253A260%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A26264%252Fscripts%252Fangular.min.js%253A21%253A262%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A26264%252Fscripts%252Fangular.min.js%253A33%253A1%250A%2520%2520%2520%2520at%2520Array.forEach%2520(native)%250A%2520%2520%2520%2520at%2520q%2520(http%253A%252F%252Flocalhost%253A26264%252Fscripts%252Fangular.min.js%253A7%253A280)%250A%2520%2520%2520%2520at%2520e%2520(http%253A%252F%252Flocalhost%253A26264%252Fscripts%252Fangular.min.js%253A32%253A445)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A26264%252Fscripts%252Fangular.min.js%253A33%253A18%250A%2520%2520%2520%2520at%2520Array.forEach%2520(native)%0A%20%20%20%20at%20Error%20(native)%0A%20%20%20%20at%20http:%2F%2Flocalhost:26264%2Fscripts%2Fangular.min.js:6:450%0A%20%20%20%20at%20http:%2F%2Flocalhost:26264%2Fscripts%2Fangular.min.js:33:332%0A%20%20%20%20at%20Array.forEach%20(native)%0A%20%20%20%20at%20q%20(http:%2F%2Flocalhost:26264%2Fscripts%2Fangular.min.js:7:280)%0A%20%20%20%20at%20e%20(http:%2F%2Flocalhost:26264%2Fscripts%2Fangular.min.js:32:445)%0A%20%20%20%20at%20http:%2F%2Flocalhost:26264%2Fscripts%2Fangular.min.js:33:18%0A%20%20%20%20at%20Array.forEach%20(native)%0A%20%20%20%20at%20q%20(http:%2F%2Flocalhost:26264%2Fscripts%2Fangular.min.js:7:280)%0A%20%20%20%20at%20e%20(http:%2F%2Flocalhost:26264%2Fscripts%2Fangular.min.js:32:445

EDIT: After referring below

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>

I am getting below error.

Line: 4442
Error: [$injector:cdep] Circular dependency found: $http <- $templateRequest <- $$animateQueue <- $animate <- cfpLoadingBar <- $http <- authService
http://errors.angularjs.org/1.4.7/$injector/cdep?p0=%24http%20%3C-%20%24templateRequest%20%3C-%20%24%24animateQueue%20%3C-%20%24animate%20%3C-%20cfpLoadingBar%20%3C-%20%24http%20%3C-%20authService

解决方案

According to the stacktrace, angular didn't found the module ngAnimate. You probably forgot to link angular-animate script from your index.html page.

index.html

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>

这篇关于引导轮播显示全部图像一次与错误，当我用NG-重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！