Question

我使用angularjs并且我无法获得以下控制器以将AJAX请求返回的数据保存到$ scope变量到Flickr。 $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);
         }
    }); 
  });
}]);

Answer 1

请勿使用jQuery.ajax。 Angular的$http也可以JSONP。您可以阅读有关here的更多信息。

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

Answer 2

因为您正在执行Angular的知识以外的代码，所以您需要手动调用$scope.$digest()来查看＆＃34;参见＆＃34;您的更改并相应地更新标记。

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

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

注意：$scope.$apply()也可以使用，因为它会从$digest向下开始，对应用程序中的每个范围执行$rootScope。在一个大型应用程序中，这可能比必要的慢得多，因此在您的情况下，我建议仅从您正在修改的范围中进行消化。

Answer 3

感谢大家的帮助和反馈。我找到了使用$ q和$ http.jsonp的解决方案，部分归功于本教程：

http://youtu.be/gApduktFwxw?t=17m

这是我的代码，请注意我的flickr的API网址字符串附加了&jsoncallback=JSON_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();

在$ http.get请求中调用AJAX后，Angularjs不将变量存储到$ scope

3 个答案: