角度ui-bootstrap輪播-圖片未加載

Question

    var app = angular.module('app',['ui.bootstrap'])
app.controller('getResources',['$scope',function($scope){
    $scope.myInterval = 5000;
    $scope.noWrapSlides = false;
    $scope.active = 0;
    var slides = $scope.slides = [];
    var currIndex = 0;

    $scope.addSlide = function() {
      slides.push({
        image: [
            "https://webmppcapstone.blob.core.windows.net/fruitsimages/strawberries.jpg",
            "https://webmppcapstone.blob.core.windows.net/fruitsimages/banana.jpg",
            "https://webmppcapstone.blob.core.windows.net/fruitsimages/avocado.jpg",
            "https://webmppcapstone.blob.core.windows.net/dairy-royaltyfree/wholemilk.png"
        ][slides.length % 4],
        text: ['Nice image','Awesome photograph','That is so cool','I love that'][slides.length % 4],
        id: currIndex++
      });
      for (var i = 0; i < 4; i++) {
        $scope.addSlide();
    }
}
}]);

圖像未加載。 我究竟做錯了什么？。 我正在嘗試將圖像推入slides.image對象，並將其作為html中的ng-src引用，但似乎根本沒有加載。

Answer 1

您正在使用將幻燈片添加到未附加到示波器的局部變量slides中。 使用$scope.slides代替

var app = angular.module('app',['ui.bootstrap'])
app.controller('getResources',['$scope',function($scope){
    $scope.myInterval = 5000;
    $scope.noWrapSlides = false;
    $scope.active = 0;
    $scope.slides = [];
    var currIndex = 0;

    $scope.addSlide = function() {
      $scope.slides.push({
        image: [
            "https://webmppcapstone.blob.core.windows.net/fruitsimages/strawberries.jpg",
            "https://webmppcapstone.blob.core.windows.net/fruitsimages/banana.jpg",
            "https://webmppcapstone.blob.core.windows.net/fruitsimages/avocado.jpg",
            "https://webmppcapstone.blob.core.windows.net/dairy-royaltyfree/wholemilk.png"
        ][$scope.slides.length % 4],
        text: ['Nice image','Awesome photograph','That is so cool','I love that'][$scope.slides.length % 4],
        id: currIndex++
      });
      for (var i = 0; i < 4; i++) {
        $scope.addSlide();
    }
}
}]);