AngularJS सफलता

Question

करने के लिए HTTP घटना के लिए प्रतीक्षा मैं AngularJS के लिए सभी नए हूँ और कुछ मदद की ज़रूरत है AppCtrl, मैं एक "AppCtrl" है और वहाँ से मैं एक HTTP वेब सेवा कॉल कर सकते हैं - और वेब सेवा कॉल प्रतिक्रिया मेरे अन्य नियंत्रकों में सुलभ की जरूरत है ।

angular.module('starter.controllers', []) 

.controller('AppCtrl', function($scope, $http) { 

    $scope.webservice_url = "http://webserviceurl.com/"; 

    $http.get($scope.webservice_url+"?action=get_settings").success(function(data, status, headers, config) { 
     $scope.stations = data.stations; 
    }); 
}) 

यह ठीक काम करता है - और मैं अपने टेम्पलेट्स में $ scope.stations उपयोग कर सकते हैं - लेकिन अब मैं मेरी "PlaylistCtrl" नियंत्रक में $ scope.stations उपयोग करना चाहते हैं, लेकिन इस अपरिभाषित है :(

.controller('PlaylistCtrl', function($scope, $stateParams) { 
    console.log($scope.stations); // is undefined :(
}) 

कैसे मुझे यकीन है कि http कॉल "PlaylistCtrl" से पहले "हो गया" (सफलता) है बना सकते हैं भरी हुई है ...

Answer 1

आप/कारखाना सेवा में http कर देना चाहिए संभव

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope, dataService) { 
    dataService.then(function (data) { 
    $scope.data = data 
    }) 
}); 


app.controller('SecondCtrl', function($scope, dataService) { 
    dataService.then(function (data) { 
    $scope.secData = data 
    }) 
}); 

app.service('dataService', function ($http, $q){ 
    var defferer = $q.defer() 

    $http.jsonp('http://ip.jsontest.com/?callback=JSON_CALLBACK').success(function (data){ 
    defferer.resolve(data) 
    }) 

    return defferer.promise 
}) 

http://plnkr.co/edit/8k97DngZ8KoFOBPFJG82?p=preview उदाहरण काम कर रहा है, तो

Answer 2

$scope.stations IST PlayListCtrl में अपरिभाषित नहीं क्योंकि HTTP कॉल समाप्त नहीं हुआ है, लेकिन क्योंकि PlayListCtrl में एक अलगहै AppCtrl से।

आप एक ऐसी सेवा में वेब सेवा कॉल डाल दिया और सभी नियंत्रकों से उसके लिए आवश्यक में है कि सेवा इंजेक्षन चाहिए।

Answer 3

// Make a remote request. 
$http.get('some wonderful URL for a service').success(function (results) { 
    superImportantInfo = results; 

    semaphore = true; 
}); 

while (!semaphore) { 
    // We're just waiting. 
} 

इस प्रकार आप अपने नियंत्रक को कंट्रोलर 1 के निष्पादन को समाप्त करने तक और अगले नियंत्रक पर जाने से पहले प्रतीक्षा कर सकते हैं।

आशा इस मदद!

Answer 4

कोणीय में, आप प्रतिपादन से पहले डेटा के लिए इंतजार नहीं है। आप इसे रेंडर करते हैं, भले ही सरणी प्रारंभ में खाली हो, और फिर डेटा लौटने के बाद, आप फिर से प्रस्तुत करें। कोणीय उच्च स्तर की प्रतिक्रिया बनाए रखने के लिए करता है। यह डिज़ाइन द्वारा है, और ऐसा कुछ नहीं जिसे आपको बदलने की कोशिश करनी चाहिए।

आपके अपरिभाषित चर को ठीक करने के लिए आपको बस इतना करना है कि आपके नियंत्रक में stations स्कोप चर प्रारंभ करें। हालांकि यह ओवरराइट हो जाता है जब डेटा आपकी सेवा से लौटता है, यह कोई बात नहीं क्योंकि कोणीय संदर्भ द्वारा गुंजाइश चर में परिवर्तन के लिए देख सकते हैं और जब यह होता है सभी दृश्यों अद्यतन करेगा।

angular.module('starter.controllers', []) 

.controller('AppCtrl', function($scope, $http) { 

    $scope.webservice_url = "http://webserviceurl.com/"; 

    $scope.stations = []; 
    $http.get($scope.webservice_url+"?action=get_settings").success(function(data, status, headers, config) { 

     $scope.stations = data.stations; 
    }); 
}) 

अपने भीतर के नियंत्रक में, यदि डेटा अभी तक वापस नहीं आया, $ scope.stations एक खाली सरणी होगा:

.controller('PlaylistCtrl', function($scope, $stateParams) { 
    console.log($scope.stations); // is [] 
    $scope.$watch('stations', function(newVal) { 
     alert('data returned!! updating views!'); 

    }); 
}) 

एक बार डेटा रिटर्न, गुंजाइश पर सरणी संदर्भ है अधिलेखित, दृश्य को अपडेट करने के लिए किसी भी $ घड़ी हैंडलर को बुलाया जाता है।