Angularjs nicht Speichern von Variable zu $ ​​Scope nach AJAX-Aufruf innerhalb $ http.get Anfrage

Question

Ich benutze angularjs und ich kann nicht erhalten den folgenden Controller in einer $ Scope-Variable die Daten von einer AJAX Anfrage an Flickr zurückgegeben zu speichern. Die $http.get ruft eine lokal gespeicherte JSON-Datei auf. Bei Erfolg wird der in success() zurückgegebene JSON verwendet, um die entsprechende URL für den AJAX-Aufruf an die Flickr-API zu ermitteln. Bei Erfolg dieses Anrufs protokolliere ich die Daten auf der Konsole. So weit, so gut, es gibt eine Reihe von drei Objekten zurück. Ich versuche jedoch, dieses Array auf eine $ Scope-Variable ($scope.photos) zu setzen, damit ich meine Ansichtsvorlage durchlaufen kann. Jedoch, wenn ich versuche, {{photos}} in der HTML-Ausgabe auszugeben, gibt es nichts. Ich vermute, dass dies ein Versprechensproblem ist, und die Vorlage wird gerendert, bevor der AJAX die Daten von Flickr zurückgibt, aber ich habe die Dokumente ohne Erfolg überflutet (siehe $q ein wenig). Ich bin Angular etwas neu und würde Ihre Einsicht schätzen. Vielen Dank!

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

Vielen Dank für Ihre Hilfe und Ihr Feedback. Ich habe eine Lösung mit $ q und $ http.jsonp, teilweise dank dieses Tutorial gefunden:

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

Hier mein Code ist zu beachten, dass meine API url String flickr hat &jsoncallback=JSON_CALLBACK daran angehängt:

$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(); 

Answer 2

Weil Sie Code außerhalb von Angular Wissen Ausführung sind, müssen Sie manuell $scope.$digest() dafür nennen, um die Änderung zu „sehen“ und das Markup entsprechend zu aktualisieren.

ändern Sie einfach Ihren Erfolg Handler:

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

Hinweis: $scope.$apply() würde auch funktionieren, weil es ein $digest jeden einzelnen Bereich in der Anwendung des Fall ist, von dem $rootScope nach unten beginnen. Bei einer großen Anwendung kann dies viel langsamer als nötig sein. Daher empfehle ich in Ihrem Fall, nur aus dem Bereich, den Sie gerade ändern, zu verdauen.

Answer 3

Verwenden Sie nicht jQuery.ajax. Angulars $http kann JSONP auch tun. Sie können mehr über here lesen.

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