Angularjs 从REST服务获取数据并在DOM中显示数据时的角度计时/绑定问题

我似乎在角度http调用和以有意义的方式使用检索到的数据方面遇到了一些困难

我想做的是创建一个旋转木马，但是图像来自我们的REST服务。如果我使用一个本地json数组来填充，我可以很好地设置旋转木马，但是我从RESTAPI检索的数据到达得太晚，无法包含在DOM中，我无法将其包含在其中

我正在使用Angular 1.5和插件。在本文中，我重新创建了我在本地拥有的内容，您可以看到前几个panda图像是从定义的json加载的，但是我重写$scope.slides变量时使用的http.get（）数据没有显示。似乎在某个地方有一些交流，因为分页点确实在更新，滑块一直在滑动，但是如果您查看DOM，在第一个之后就没有更多的幻灯片了（10？当我定义了5？时，可能是ui.carousel功能？）

Html:

远程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似乎保留了旧数据

---

我做错了什么

我已经更新了您的plnkr。请检查URL。迭代并将其推送到数组的方式已更改

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中转储了幻灯片，它显示了所有元素

---

我认为这是因为您正在覆盖数组$scope.slides。如果您想在数组$scope.slides.push（response.data）中追加任何内容，请尝试推送它；已经有一个bug帖子@CrazyMac，这并没有改变结果，很遗憾：我只得到了一个空变量。@Anuragdaheech，根据kkruit 14年11月11日的提交，它不应该被修复吗？（）@Kablam如下更改您的迭代，我已经更新了您的plnkr$http.get（{angular.forEach（response.data，function（element，index）{$scope.slides.push（element）；}）谢谢你，但是…它对你有用吗？你看到的图像比我在本地加载的熊猫的图像多吗？因为据我所知，这并不能解决我的问题：（是的，我可以看到其他图像。。这是一个大列表。我认为数组对我来说很好。只是检查您使用的指令将如何呈现更新的数组。我真的很抱歉，但老实说，我只看到在查询REST服务之前加载的熊猫的前几张图像。->。我正在查看您的plunker，并编辑了我的plunker也包括您的更改，但不包括视图或DOM中的新图像。请查看我附加的图像。我不确定您用于旋转木马的指令，但您可以检查{{slides}}是否显示了所有项目和url

[
    {
        "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.

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

 });