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