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

Question

我正在使用angularjs,我无法使用以下控制器将AJAX请求返回的$ scope变量保存到Flickr.该$http.get做的本地保存JSON文件的调用.成功后,它使用返回的json success()来确定对Flickr API的AJAX调用的适当URL.该调用成功后,我将数据记录到控制台.到目前为止,它返回了一个包含三个对象的数组.但是,我正在尝试将该数组设置为$ scope变量($scope.photos),以便我可以迭代我的视图模板.但是,当我尝试{{photos}}在html中输出时,什么也没有.我怀疑这是一个承诺问题,模板在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.你可以在这里阅读更多信息.

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()它以"查看"您的更改并相应地更新标记.

只需将成功处理程序更改为:

 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 url 字符串已&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();