देखने के लिए ट्रैक करें जब एंगलुलर

Question

में कोई दृश्य बदलता है, क्या कोई जानता है कि दृश्य बदलते समय कोणीय आग को एक घटना कैसे बनाना है? या सही जब कोई दृश्य अनुरोध किया जाता है और डाउनलोड किया जाता है? जब पेज बदलते हैं तो मैं लोडिंग एनीमेशन जोड़ने की कोशिश कर रहा हूं।

Answer 1

this thread पर एक नज़र डालें, ऐसा लगता है कि $httpProvider.responseInterceptors इस प्रकार की चीज़ को जोड़ने के लिए एक अच्छी जगह है।

This fiddle AJAX अनुरोधों के लिए स्पिनर को शुरू/बंद करने के लिए कोड जोड़ने के लिए एक अच्छा उदाहरण दिखाता है। This fiddle समान है लेकिन वास्तव में एक 'लोड हो रहा है ...' div दिखाता है और छुपाता है।

आप केवल एक स्पिनर को दिखाने के लिए जब नजरिये को बदलने यदि आप अपना प्रारंभ की सीमा/कोड को रोक सकता है जब content-typetext/html क्या this postapplication/json साथ चलता करने के लिए इसी तरह के बराबर होती है चाहते हैं।

नोट: मेरे परीक्षणों में यह headersGetter()['Content-Type'] जैसा दिखता है spinnerFunction में मेरी .html फ़ाइलों को पुनर्प्राप्त करते समय छोड़ा जाता है जबकि यह सेवा कॉल करते समय पॉप्युलेट किया जाता है।

Answer 2

मुझे लगता है कि एंगुलरजेएस $http.pendingRequests.length कॉल का उपयोग करने के लिए एक बहुत ही सरल, अनुकूलनीय दृष्टिकोण होगा। यह लंबित AJAX कॉल गिनती देता है। तो जब यह 0 तक पहुंचता है, तो आप पृष्ठ लोड हो रहे हैं।

आप किसी भी तत्व पर लोडिंग div (scrim) डालने वाला एक निर्देश बना सकते हैं और उसके बाद सभी स्पंज को हल करने के लिए सभी AJAX कॉलों को प्रतीक्षा कर सकते हैं और फिर आपके स्पिनर को हटा दें।

 // Prepend the loading div to the dom element that this directive is applied. 
     var scrim = $('<div id="loading"></div>'); 
     $(scrim).prependTo(domElement); 

     /** 
     * returns the number of active ajax requests (angular + jquery) 
     * $.active returns the count of jQuery specific unresolved ajax calls. It becomes 0 if 
     * there are no calls to be made or when calls become finished. 
     * @return number of active requests. 
     */ 
     function totalActiveAjaxRequests() { 
      return ($http.pendingRequests.length + $.active); 
     } 

     /** 
     * Check for completion of pending Ajax requests. When they're done, 
     * remove the loading screen and show the page data. 
     */ 
     scope.$watch(totalActiveAjaxRequests, function whenActiveAjaxRequestsChange() { 
      if(totalActiveAjaxRequests() === 0){ 
       $log.log("done loading ajax requests"); 
       $(scrim).remove(); 
       $(domElement).css("position", "inherit"); 
      } 
     }); 

कृपया ध्यान दें, $ .active undocumented है:

यहाँ कोड का मांस अपने AngularJS निर्देश बनाने के लिए है।