javascript - 出现 Angular.js 错误

Question

我正在学习 YouTube 上的教程，但遇到了一个无法解决的问题。我正在将图像加载到 Angular 引导轮播中。但我收到错误，并且图像未显示。

这是我的错误:

这是我的 homeController.js:

// Set up the "homeController", inject our "$scope"
myApp.controller('homeController', ['$scope', function($scope) {
    $scope.slides = [{
        image: "img/Astro_3.jpg"
    },
    {
        image: "img/main_2.jpg"
    },
    {
        image: "img/Xbox_Controller_2.jpg"
    }]
}]);

这是我的轮播:

<div class="row">
    <div class="col-md-3 col-md-offset-3">

        <uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
          <uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
            <img ng-src="{{slide.image}}" style="margin:auto;">
            <div class="carousel-caption">
              <h4>Slide {{slide.id}}</h4>
              <p>{{slide.text}}</p>
            </div>
          </uib-slide>
        </uib-carousel>

    </div>
</div>

/************************ 编辑******************** **/

修复了这个问题，必须更改轮播中的 HTML。

 <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 {{slide.id}}</h4>
              <p>{{slide.text}}</p>
            </div>
          </slide>
        </carousel>

Answer 1

您的幻灯片对象没有 id 属性，因此在 ng-repeat 中您必须设置如下内容:

ng-repeat="slide in slides track by slide.image"

或者您可以为每个幻灯片对象设置一个 ID。