Angularjs non memorizza la variabile su $ scope dopo la chiamata AJAX nella richiesta $ http.get

Question

Sto utilizzando angularjs e non riesco a ottenere il seguente controller per salvare in una variabile $ scope i dati restituiti da una richiesta AJAX a Flickr. Lo $http.get effettua una chiamata a un file JSON salvato localmente. In caso di successo, utilizza il json restituito in success() per determinare l'URL appropriato per la chiamata AJAX all'API di Flickr. Al successo di quella chiamata, registro i dati sulla console. Fin qui tutto bene, restituisce una serie di tre oggetti. Tuttavia, sto cercando di impostare tale array su una variabile $ scope ($scope.photos) in modo da poter scorrere su di esso il mio modello di visualizzazione. Tuttavia, quando provo a produrre {{photos}} nell'html non c'è nulla. Sospetto che si tratti di un problema di promessa e il modello è in fase di rendering prima che AJAX restituisca i dati da Flickr, ma ho riversato i documenti senza esito positivo (guardato un po 'a $q). Sono un po 'nuovo per Angular e apprezzerei la tua intuizione. Grazie!

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

Grazie a tutti per il vostro aiuto e feedback. Ho trovato una soluzione che utilizza $ q $ e http.jsonp, in parte grazie a questo tutorial:

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

Ecco il mio codice, si noti che il mio API stringa URL di Flickr ha &jsoncallback=JSON_CALLBACK aggiunto ad esso:

$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

Poiché si sta eseguendo il codice di fuori della conoscenza di angolare, è necessario chiamare manualmente $scope.$digest() per poter "vedere" le modifiche e aggiornare il markup di conseguenza.

solo cambiare il vostro gestore di successo a:

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

Nota: $scope.$apply() sarebbe anche lavorare, perché fa un $digest di ogni singolo ambito nell'applicazione, a partire dalla $rootScope verso il basso. Su una grande applicazione, questo può essere molto più lento del necessario, quindi nel tuo caso raccomando solo di digerire dall'ambito che stai modificando.

Answer 3

Non utilizzare jQuery.ajax. Angular's $http può fare anche JSONP. Puoi leggere di più su 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); 
    }); 
    }); 
}]);