AngularJS चर भंडारण नहीं AJAX कॉल $ http.get के भीतर अनुरोध

Question

के बाद गुंजाइश डॉलर तक मैं angularjs उपयोग कर रहा हूँ और मैं निम्नलिखित नियंत्रक एक $ गुंजाइश चर डेटा फ़्लिकर के लिए एक AJAX अनुरोध से लौटे को बचाने के लिए नहीं मिल सकता है। $http.get स्थानीय रूप से सहेजी गई जेसन फ़ाइल पर कॉल करता है। सफलता पर, यह फ्लिकर एपीआई को AJAX कॉल के लिए उचित यूआरएल निर्धारित करने के लिए success() में वापस जेसन का उपयोग करता है। उस कॉल की सफलता पर, मैं कंसोल पर डेटा लॉग करता हूं। अब तक इतना अच्छा है, यह तीन वस्तुओं की एक सरणी देता है। हालांकि, मैं उस सरणी को एक $ स्कोप वैरिएबल ($scope.photos) पर सेट करने का प्रयास कर रहा हूं, इसलिए मैं इसे अपने दृश्य टेम्पलेट पर पुन: सक्रिय कर सकता हूं। हालांकि, जब मैं HTML में {{photos}} आउटपुट करने का प्रयास करता हूं तो कुछ भी नहीं है। मुझे संदेह है कि यह एक वादा मुद्दा है, और टेम्पलेट फ़्लिकर से डेटा लौटने से पहले प्रतिपादन कर रहा है, लेकिन मैं बिना किसी सफलता के दस्तावेज़ों पर डालना चाहता हूं ($q को थोड़ा सा देखा)। मैं कोणीय के लिए कुछ नया हूँ और आपकी अंतर्दृष्टि की सराहना करता हूं। धन्यवाद!

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

आपकी मदद और प्रतिक्रिया के लिए सभी को धन्यवाद। मैं इस ट्यूटोरियल के भाग धन्यवाद में, एक समाधान पाया है $ q और $ http.jsonp का उपयोग कर:

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

यहाँ मेरी कोड है, ध्यान दें कि फ़्लिकर करने के लिए अपने एपीआई यूआरएल स्ट्रिंग &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(); 

Answer 2

क्योंकि आप कोणीय के ज्ञान के बाहर कोड को क्रियान्वित कर रहे हैं, तो आप अपने परिवर्तन "देख" और उसके अनुसार मार्कअप अद्यतन करने के लिए मैन्युअल रूप से इसके लिए $scope.$digest() कॉल करने के लिए की जरूरत है।

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

नोट::

बस के लिए अपनी सफलता हैंडलर बदलने $scope.$apply() भी काम करेगा, क्योंकि यह अपने आवेदन में हर एक गुंजाइश की एक $digest करता है, $rootScope नीचे से शुरू। एक बड़े आवेदन पर, यह आवश्यक से बहुत धीमा हो सकता है, इसलिए आपके मामले में मैं केवल उस दायरे से पचाने की सलाह देता हूं जिसे आप संशोधित कर रहे हैं।

Answer 3

jQuery.ajax का उपयोग न करें। कोणीय $httpJSONP भी कर सकता है। आप 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); 
    }); 
    }); 
}]);