Javascript Angularjs在$http.get请求内的AJAX调用后未将变量存储到$scope

我使用的是

angularjs

，无法让下面的控制器将

AJAX

请求返回到Flickr的数据保存到$scope变量中。

$http.get

调用本地保存的json文件。成功后，它使用

success（）

中返回的json来确定对Flickr API的AJAX调用的适当url。调用成功后，我将数据记录到控制台。到目前为止，它返回一个由三个对象组成的数组。但是，我正在尝试将该数组设置为$scope变量（

$scope.photos

），以便在视图模板中对其进行迭代。但是，当我尝试在html中输出

{{{photos}}

时，什么都没有。我怀疑这是一个承诺问题，在AJAX从Flickr返回数据之前，模板已经呈现出来了，但是我一直在重复文档，但没有成功（稍微看一下

$q

）。我对Angular有点陌生，希望你能有所见识。谢谢

artistControllers.controller('PhotoController', ['$scope', '$http', '$routeParams', '$q', function ($scope, $http, $routeParams, $q){
  $http.get('js/data.json').success(function(data){
    $scope.artists = data;
    $.ajax({
         type : "GET",
         dataType : "jsonp",
         url : $scope.artists[$routeParams.itemId].flickr,
         success: function(flickr){
            $scope.photos = flickr.items;
            console.log($scope.photos);
         }
    }); 
  });
}]);

---

由于您执行的代码超出Angular的知识范围，因此需要手动调用

$scope.$digest（）

，以便它“查看”您的更改并相应地更新标记

只需将您的成功处理程序更改为：

 success: function(flickr){
    $scope.photos = flickr.items;
    $scope.$digest();
 }

---

注意：

$scope.$apply（）

也可以，因为它从

$rootScope

开始对应用程序中的每个作用域执行

$digest

。在大型应用程序上，这可能比必要的慢得多，因此在您的情况下，我建议只从您正在修改的范围中进行消化。

不要使用

jQuery.ajax

。Angular的

$http

也可以做

JSONP

。你可以阅读更多关于

---

谢谢大家的帮助和反馈。我发现了一个使用$q和$http.jsonp的解决方案，这部分要归功于本教程：

这是我的代码，请注意，我的flickr API url字符串附加了

&jsoncallback=JSON\u CALLBACK

：

$http.get('js/data.json').success(function(data){
    $scope.artist = data[$routeParams.itemId];
    var url =  $scope.artist.flickr;
    console.log(url);

    $scope.init = function(){
        $scope.getImages()
        .then(function(res){
            console.log(res);
        }, function(status){
            console.log(status);
        });
    };

    $scope.getImages = function(){
        var defer = $q.defer();

        $http.jsonp(url)
            .success(function(res){
                defer.resolve(res);
                console.log(res);
            }).error(function(status, err){
                defer.reject(status);
                console.log(err);
            });

        return defer.promise;           
    };

    $scope.init();

---

为什么要使用jQuery而不是

$http

？一个有效的问题@Phil，类似的评论见下文。简短的回答是，如果没有$.ajax，我还无法成功地调用Flickr。以下是一个可能有助于解决Flickr问题的答案：这并不理想。您不必手动调用

$digest

$http

为您执行此操作。正确。我应该提到，最好使用Angular

$http

服务。但是如果您必须使用jQuery

.ajax（）

方法，那么您确实需要自己执行

$scope.$digest（）

，这就是我所寻找的方法。它刚刚解决了这个问题，谢谢。我正在研究$http.jsonp，但是我还没有能够使它正常工作，而$http.jsonp可以。将继续努力实现纯角度实现。下面是一个随机JSFIDLE，演示如何使用它：

$http.get('js/data.json').success(function(data){
    $scope.artist = data[$routeParams.itemId];
    var url =  $scope.artist.flickr;
    console.log(url);

    $scope.init = function(){
        $scope.getImages()
        .then(function(res){
            console.log(res);
        }, function(status){
            console.log(status);
        });
    };

    $scope.getImages = function(){
        var defer = $q.defer();

        $http.jsonp(url)
            .success(function(res){
                defer.resolve(res);
                console.log(res);
            }).error(function(status, err){
                defer.reject(status);
                console.log(err);
            });

        return defer.promise;           
    };

    $scope.init();