当我使用 ng-repeat 时，Bootstrap Carousel 一次显示所有图像并出现错误答案

【问题标题】：Bootstrap Carousel showing all images at once with error when i use ng-repeat当我使用 ng-repeat 时，Bootstrap Carousel 一次显示所有图像并出现错误
【发布时间】：2016-02-24 01:16:10
【问题描述】：

我正在尝试将轮播 (http://angular-ui.github.io/bootstrap/#/carousel) 添加到我的 Bootstrap 3 网站。但是，所有图像都同时显示错误。

当我使用 carousel(http://angular-ui.github.io/bootstrap/#/carousel) 代码创建示例项目时，它工作正常。

我的模块如下所示

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

并且，对于轮播需要以下内容。

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

所以当我将以上 2 添加到我的项目中时

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

我遇到了错误。

编辑：参考后

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

我遇到了错误。

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

【问题讨论】：

你真的需要 Angular 吗？如果你不这样做，我建议你使用Bootstrap Carousel。您唯一需要做的就是在文档末尾添加bootstrap.js <body>：<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>。您可能还需要 jQuery：<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>。将 jQuery 脚本放在引导程序之前。然后从Boostrap website复制并粘贴示例代码。
我一开始只用了这个。我遇到了同样的问题。看这里我之前的问题stackoverflow.com/questions/33637458/…

标签： angularjs html carousel

【解决方案1】：

根据堆栈跟踪，angular 没有找到模块ngAnimate。您可能忘记从 index.html 页面链接 angular-animate 脚本。

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>

【讨论】：

谢谢。这样做之后，我得到低于循环依赖错误。请参阅我的问题中的编辑部分。 “行：4442 错误：[$injector:cdep] 找到循环依赖项：$http errors.angularjs.org/1.4.7/$injector/…”
太棒了！... 移除 'angular-loading-bar' 后，carousel(angular-ui.github.io/bootstrap/#/carousel) 工作正常。我正在使用“angular-loading-bar v0.3.0 * chieffancypants.github.io/angular-loading-bar”
太棒了！ :) 看起来你对角度很好。祝你好运！
首先一定要使用最新版本的angular-loading-bar，因为曾经有一个循环依赖错误，已经更正了。如果问题仍然存在于最新版本，那可能来自它的使用，但如果没有看到代码，这几乎是不可能的。然后，您可以使用代码打开一个新线程，理想情况下是一个能重现问题的 plunker。
@MichaelP.Bazos，将“angular-loading-bar v0.3.0”升级到最新版本后，即）“angular-loading-bar v0.8.0”工作完美:)。非常感谢。