AngularJs Corousel funktioniert nicht mehr

Question

Mar 25, 2014, 06:16 PM

AngularJs Corousel funktioniert nicht mehr

Ich versuche, ein Karussell mit UI-Bootstrap für AngularJS zu erstellen. Ich kopiere / füge es direkt aus den Angular Docs ein und es funktioniert, ABER es funktioniert nicht mehr auf der letzten Folie.

Es kehrt nicht zum Anfang zurück und die Steuerung funktioniert nicht mehr. Es werden keine Fehler auf der Konsole angezeigt. Es funktioniert einfach nicht mehr

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

BEARBEITEN: Ich habe es noch einmal überprüft und es hört nicht auf, auf der letzten Folie zu arbeiten, tatsächlich hört es auf der ZWEITEN auf, egal wie viele Elemente es gibt.

EDIT: Ich habe eine Testseite nur mit dem Karussell erstellt und funktioniert immer noch nicht

Dies ist der gesamte Code. Er stoppt bei Folie 2 und die Steuerelemente funktionieren nicht mehr

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


    });