angularfireCollection: पता है कि डेटा पूरी तरह से लोड होने पर

Question

मैं एक छोटा कोणीय वेब एप्लिकेशन लिख रहा हूं और डेटा लोड करने की स्थिति में समस्याएं चलाता हूं। मैं फायरबेस को डेटासोर्स के रूप में उपयोग कर रहा हूं और एंगुलरफायर प्रोजेक्ट मिला जो अच्छा लगा। हालांकि, मुझे डेटा प्रदर्शित होने के तरीके को नियंत्रित करने में परेशानी हो रही है।

सबसे पहले मैं ऐसा करके नियमित रूप से निहित तुल्यकालन उपयोग करने की कोशिश:

angularFire(ref, $scope, 'items'); 

यह ठीक काम किया है और जब मैं मेरे विचार में मॉडल $ आइटम इस्तेमाल किया सभी डेटा प्रदर्शित किया गया था। हालांकि, जब डेटा फ़ायरबेस डेटा स्रोत से आ रहा है, तो इसे स्वरूपित करने के तरीके में स्वरूपित नहीं किया गया है, इसलिए मुझे प्रदर्शित होने से पहले डेटा में कुछ अतिरिक्त संरचनात्मक परिवर्तन करने की आवश्यकता है। समस्या यह है कि, मुझे नहीं पता होगा कि डेटा पूरी तरह से लोड हो गया है। मैंने $ वस्तुओं को $ घड़ी सौंपने का प्रयास किया, लेकिन इसे बहुत जल्दी कहा जाता था।

तो, मैं पर चले गए और इसके बजाय angularfireCollection का उपयोग करने की कोशिश की:

$scope.items = angularFireCollection(new Firebase(url), optionalCallbackOnInitialLoad); 

प्रलेखन काफी स्पष्ट है कि "optionalCallbackOnInitialLoad" नहीं करता है और जब यह कहा जाता है, लेकिन पहले आइटम तक पहुंचने की कोशिश कर रहा $ आइटम संग्रह में एक त्रुटि फेंक जाएगी ("अनकही टाइप त्रुटि: अपरिभाषित की संपत्ति '0' नहीं पढ़ी जा सकती है)।

मैं एक बटन जोड़ने की कोशिश की और बटन के क्लिक हैंडलर में मैं $ मदों में पहले आइटम की सामग्री को लॉग इन किया है, और यह काम किया:

console.log($scope.items[0]); 

इसमें किया गया था! मेरे फायरबेस से पहली वस्तु किसी भी त्रुटि के बिना प्रदर्शित की गई थी ... केवल समस्या यह है कि मुझे वहां जाने के लिए एक बटन क्लिक करना पड़ा।

तो, किसी को भी मैं कैसे पता कर सकते हैं पता है जब सभी डेटा लोड किया गया है और तो एक $ गुंजाइश चर के लिए असाइन करें मेरे विचार में प्रदर्शित करने के लिए? क्या कोई और तरीका है?

मेरे नियंत्रक:

app.controller('MyController', ['$scope', 'angularFireCollection', 
    function MyController($scope, angularFireCollection) { 
    $scope.start = function() 
    { 
     var ref = new Firebase('https://url.firebaseio.com/days'); 
     console.log("start"); 

     console.log("before load?"); 

     $scope.items = angularFireCollection(ref, function() 
     { 
      console.log("loaded?"); 
      console.log($scope.items[0]); //undefined 
     }); 

     console.log("start() out");  
    }; 

    $scope.start(); 

    //wait for changes 
    $scope.$watch('items', function() { 
     console.log("items watch"); 
     console.log($scope.items[0]); //undefined 
    }); 

    $scope.testData = function() 
    { 
     console.log($scope.items[0].properties); //not undefined 
    }; 
    } 
]); 

मेरा विचार:

<button ng-click="testData()">Is the data loaded yet?</button> 

अग्रिम धन्यवाद!

Answer 1

So, does anyone know how I can know when all the data has been loaded and then assign it to a $scope variable to be displayed in my view? Or is there another way?

याद रखें कि सभी फायरबेस कॉल अतुल्यकालिक हैं। आपकी कई समस्याएं हो रही हैं क्योंकि आप उन तत्वों तक पहुंचने का प्रयास कर रहे हैं जो अभी तक मौजूद नहीं हैं। बटन क्लिक आपके लिए काम करने का कारण है क्योंकि आपने सफलतापूर्वक लोड होने के बाद बटन (और तत्वों तक पहुंचा) पर क्लिक किया था।

optionalCallbackOnInitialLoad के मामले में, यह एक ऐसा कार्य है जिसे angularFireCollection के आरंभिक लोड के समाप्त होने के बाद निष्पादित किया जाएगा। जैसा कि नाम का तात्पर्य है, यह वैकल्पिक है, जिसका अर्थ है कि यदि आप नहीं चाहते हैं तो आपको कॉलबैक फ़ंक्शन प्रदान करने की आवश्यकता नहीं है।

आप या तो इसका उपयोग कर सकते हैं और इसे लोड होने के बाद निष्पादित करने के लिए एक फ़ंक्शन निर्दिष्ट कर सकते हैं, या आप $q वादे या अपनी पसंद की एक और वादा लाइब्रेरी का उपयोग कर सकते हैं। मैं आंशिक हूं kriskowal's Q स्वयं। मैं एसिंक्रोनस जावास्क्रिप्ट पर थोड़ा सा पढ़ने का सुझाव दूंगा ताकि आपको इनमें से कुछ मुद्दों की गहरी समझ हो।

सावधान है कि इस रहें:

$scope.items = angularFireCollection(ref, function() 
     { 
      console.log("loaded?"); 
      console.log($scope.items[0]); //undefined 
     }); 

सही ढंग से एक कॉलबैक फ़ंक्शन निर्दिष्ट करता है, लेकिन $scope.itemsतक के बाद आप कॉलबैक दौड़ा लिया है सौंपा प्राप्त करता है। तो, यह अभी भी मौजूद नहीं होगा।

$scope.$watch('items', function (items) { 
    console.log(items) 
}); 

Answer 2

अपने प्रोजेक्ट मैं जानना भी जब डेटा लोड किया गया है की जरूरत में:

तुम सिर्फ देखने के लिए जब $scope.items लोड किया गया है चाहते हैं, आप कुछ इस तरह की कोशिश कर सकते। मैं निम्नलिखित दृष्टिकोण (अंतर्निहित बाइंडिंग) का इस्तेमाल किया:

$scope.auctionsDiscoveryPromise = angularFire(firebaseReference.getInstance() + "/auctionlist", $scope, 'auctionlist', []); 

$scope.auctionsDiscoveryPromise.then(function() { 
    console.log("AuctionsDiscoverController auctionsDiscoveryPromise resolved"); 
    $timeout(function() { 
     $scope.$broadcast("AUCTION_INIT"); 
    }, 500); 

}, function() { 
    console.error("AuctionsDiscoverController auctionsDiscoveryPromise rejected"); 
}); 

जब $ scope.auctionsDiscoveryPromise वादा मैं एक घटना AUCTION_INIT जो मेरे निर्देशों में सुनी जा रही है प्रसारण कर रहा हूँ हल किया गया है। अगर कुछ सेवाओं या निर्देशों को अभी तक शुरू नहीं किया गया है तो मैं थोड़े समय के लिए उपयोग करता हूं।

Answer 3

मैं इस का उपयोग कर रहा है, तो यह किसी को भी मदद मिलेगी: angularFireCollection (संदर्भ, समारोह (डेटा) { $ scope.items = डेटा; console.log ($ गुंजाइश:

function getAll(items) { 

    var deferred = $q.defer(); 
    var dataRef = new Firebase(baseUrl + items); 
    var returnData = angularFireCollection(dataRef, function(data){ 
      deferred.resolve(data.val()); 
    }); 
    return deferred.promise; 

}