角定時/從REST服務中獲取數據並顯示在DOM

Question

他們的結合問題，我似乎有角HTTP調用一些困難，並使用一種有意義的方式檢索到的數據。

我所要做的是創建一個旋轉木馬，但圖像來自於我們的REST服務。如果我使用本地json數組來填充它，我可以設置輪播機制，但是我從REST api中檢索的數據來得太晚而無法包含在DOM中，而且我沒有收到它那裏。

我採用了棱角分明1.5和ui.carousel插件。在這個plunker中，我重新創建了我在本地的東西，並且您可以看到頭幾個熊貓圖像正在從定義的json中加載，但我重寫了$ scope.slides變量的http.get（）數據不顯示。好像有一些通信地方，如分頁，點做更新和滑塊不斷滑動，但是如果你在DOM看，有第一後，沒有更多的幻燈片（10？當我已經確定5？可能是ui.carousel功能）

HTML：？

<ui-carousel slides="slides" slides-to-show="3" slides-to-scroll="3" initial-slide="0" autoplay="true" autoplay-speed="2000" dots="true"> 
    <carousel-item> 
     <img src="{{ item.url }}" width="200px"> 
    </carousel-item> 
</ui-carousel> 

JS：

var app = angular.module('plunker', ['ngAnimate', 'ui.carousel']); 

app.controller('MainCtrl', ['$http', '$scope', 
    function($http, $scope) { 

     $scope.slides = [{"id":1,"url":"http://i.imgur.com/yTrf6sJ.jpg"}, 
      {"id":2,"url":"http://i.imgur.com/yTrf6sJ.jpg"}, 
      {"id":3,"url":"http://i.imgur.com/yTrf6sJ.jpg"}, 
      {"id":4,"url":"http://i.imgur.com/yTrf6sJ.jpg"}, 
      {"id":5,"url":"http://i.imgur.com/yTrf6sJ.jpg"}]; 

     $http.get('https://jsonplaceholder.typicode.com/albums/1/photos').then(function(response) { 
      console.log(JSON.stringify(response.data)); 
      $scope.slides = response.data; 
     }); 
    } 
]); 

遠程RESTservice JSON：

[ 
    { 
     "albumId": 1, 
     "id": 1, 
     "title": "accusamus beatae ad facilis cum similique qui sunt", 
     "url": "http://placehold.it/600/92c952", 
     "thumbnailUrl": "http://placehold.it/150/92c952" 
    }, 
    { 
     "albumId": 1, 
     "id": 2, 
     "title": "reprehenderit est deserunt velit ipsam", 
     "url": "http://placehold.it/600/771796", 
     "thumbnailUrl": "http://placehold.it/150/771796" 
    }, etc. 

在我看來，DOM中引用的$ scope.slides在http調用之後並沒有得到更新，即使數組本身使用新數據更新。 DOM似乎保留了舊數據。

我在做什麼錯？

Answer 1

我已更新您的plnkr。請檢查網址。你迭代，並將它推到數組的方式已經改變

app.controller('MainCtrl', ['$http', '$scope', 
function($http, $scope) { 

$scope.slides = [ 
{"id":1,"url":"http://i.imgur.com/yTrf6sJ.jpg"}, 
    {"id":2,"url":"http://i.imgur.com/yTrf6sJ.jpg"}, 
    {"id":3,"url":"http://i.imgur.com/yTrf6sJ.jpg"}, 
    {"id":4,"url":"http://i.imgur.com/yTrf6sJ.jpg"}, 
    {"id":5,"url":"http://i.imgur.com/yTrf6sJ.jpg"}]; 
$http.get('https://jsonplaceholder.typicode.com/albums/1/photos').then(function(response) { 
    angular.forEach(response.data, function(element, index){ 
     $scope.slides.push(element.url); 
    }) 

});  

} ]）;

請參閱圖像瞭解更多詳情。我甩幻燈片的HTML，它顯示的所有元素