AngularJS 旋转木马停止工作

9
我正在尝试使用ui-bootstrap为angularjs创建一个轮播图。我基本上直接从Angular文档中复制/粘贴代码,它可以工作,但是在最后一张幻灯片时停止工作。它不会回到开头,并且控件也停止工作。控制台没有显示任何错误,它只是停止工作了。
<carousel interval="myInterval">
      <slide ng-repeat="slide in carousel" active="slide.active">

        <img class="img-responsive" ng-src="app/assets/img/articles/{{slide.img}}" style="margin:auto;">

      </slide>
    </carousel>

编辑:我再次检查发现它不是在最后一张幻灯片停止工作,实际上它会在第二张幻灯片停止,无论有多少个元素。

编辑:我创建了一个只包含轮播图的测试网站,但仍然无法正常工作。

这是整个代码,它会在第二张幻灯片停止,并且控制器也停止工作。

<html >
<head>

    <title>Radiosan Site</title>

    <link rel="stylesheet" href="app/assets/lib/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="app/assets/lib/bootstrap/dist/css/bootstrap-theme.min.css">

    <script src="app/assets/lib/jquery/jquery-2.1.0.min.js" ></script>

    <script src="app/assets/lib/bootstrap/dist/js/bootstrap.min.js" ></script>

    <script src="app/assets/lib/angular/angular.min.js" ></script>
    <script src="app/assets/lib/angular/angular-route.min.js" ></script>
    <script src="app/assets/lib/angular/angular-animate.min.js" ></script>

    <script src="app/assets/lib/angular/ui-bootstrap-tpls-0.10.0.min.js"></script>

    <script src="app/RadiosanApp.js" ></script>

</head>

<body ng-app="RadiosanApp">

    <div class="container">

        <div ng-controller="MainController">
              <div style="height: 305px">
                <carousel interval="myInterval">
                  <slide ng-repeat="slide in slides" active="slide.active">
                    <img ng-src="{{slide.image}}" style="margin:auto;">
                    <div class="carousel-caption">
                      <h4>Slide {{$index}}</h4>
                      <p>{{slide.text}}</p>
                    </div>
                  </slide>
                </carousel>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <a class="btn btn-info" ng-click="addSlide()">Add Slide</a>
                </div>
                <div class="col-md-6">
                  Interval, in milliseconds: <input type="number" class="form-control" ng-model="myInterval">
                  <br />Enter a negative number to stop the interval.
                </div>
              </div>
            </div>

    </div>

    <script src="app/controllers/MainController.js"></script>

</body>

var app = 
angular.module(
    "RadiosanApp", [
    "ngRoute",
    "ui.bootstrap",
    "ngAnimate",
    "RadiosanApp.Controllers.MainController"
    ]);

angular.module("RadiosanApp.Controllers.MainController", [])
    .controller("MainController", function($scope) {

      $scope.myInterval = 5000;
      var slides = $scope.slides = [];
      $scope.addSlide = function() {
        var newWidth = 600 + slides.length;
        slides.push({
          image: 'http://placekitten.com/' + newWidth + '/300',
          text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' +
            ['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
        });
      };
      for (var i=0; i<4; i++) {
        $scope.addSlide();
      }


    });

1
唯一有效的是选择幻灯片的小点。 - Gabriel Matusevich
你能把它放到JS Fiddle上吗? - rob
我的网站和应用程序太大了,不适合在 Fiddle 上操作... 另外,在 Fiddle 上进行小规模测试时运行良好:P ... 而且我基本上只是复制和粘贴,我真的不知道它为什么会停止。 - Gabriel Matusevich
我认为可能有些东西正在干扰轮播图。 - Gabriel Matusevich
3
我发现了错误,加上ngAnimate和ui.bootstrap后,轮播组件停止工作,不知道为什么,可能是这些库不兼容,这很奇怪...但我已经尝试以不同的顺序加载它们,但还没有答案。 - Gabriel Matusevich
1个回答

32

1
我已经苦恼了很多天,所以感谢您回答这个问题。 - EoD
1
我已经通过使用Boostsrap库中的走马灯和一些ngRepeats解决了这个问题。 - Gabriel Matusevich
3
simonykq 在答案提到的链接中提供的解决方案对我有效,谢谢。 - Bhumi Singhal
1
呵呵呵...我也因为同样的问题而疯狂!非常感谢您提出并回答自己的问题!@Bhumi Singhal:那个解决方案真的是一个不错的变通方法。 :) - Leniel Maccaferri

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接