angularjs皮质停止工作

Gabriel Matusevich 发表于 Dev

加布里埃尔·马图塞维奇（Gabriel Matusevich）

我试图用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>

编辑：我再次检查，它不会停止在最后一张幻灯片，实际上它停止在第二个，无论有多少个元素。

编辑：我只是用轮播制作了一个测试站点，但仍然无法正常工作

这是完整的代码，它停止在幻灯片2上，并且控件停止工作

<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();
      }


    });