得到Angular.js错误

Question

我正在关注YouTube上的教程，遇到了一个我无法解决的问题。我将图像加载到角度引导旋转木马中。但我收到错误，图片没有显示。

这是我的错误：

这是我的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

您的幻灯片对象无法识别属性，因此在ng-repeat中您必须设置如下内容：

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

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

Answer 2

slide.id未定义，请修改您的控制器：

myApp.controller('homeController', ['$scope', function($scope) {
$scope.slides = [{
    image: "img/Astro_3.jpg",
    id: 0
},
{
    image: "img/main_2.jpg",
    id: 1
},
{
    image: "img/Xbox_Controller_2.jpg",
    id: 2
}] }]);