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

Angular ui-bootstrap carousel - 图片未加载

1 个答案: