घटना सुनने वाले
सबसे पहले यह समझना महत्वपूर्ण है कि "ईवेंट श्रोता" दो प्रकार के हैं:
स्कोप इवेंट श्रोताओं के माध्यम से पंजीकृत $on:
$scope.$on('anEvent', function (event, data) {
...
});
उदाहरण के लिए onया इसके माध्यम से तत्वों से जुड़े इवेंट हैंडलर bind:
element.on('click', function (event) {
...
});
$ गुंजाइश। $ नष्ट ()
जब $scope.$destroy()इसे निष्पादित किया जाता है तो यह $onउस $ स्कोप पर पंजीकृत सभी श्रोताओं को हटा देगा ।
यह DOM तत्वों या दूसरी तरह के किसी अटैच इवेंट हैंडलर को नहीं हटाएगा।
इसका मतलब यह है कि $scope.$destroy()निर्देश के लिंक फ़ंक्शन के भीतर उदाहरण से मैन्युअल रूप से कॉल करने से उदाहरण के लिए संलग्न हैंडलर नहीं हटाया जाएगा element.on, न ही DOM तत्व।
element.remove ()
ध्यान दें कि removeएक jqLite विधि (या jQuery विधि यदि jQuery को AngularjS से पहले लोड किया गया है) और मानक DOM तत्व ऑब्जेक्ट पर उपलब्ध नहीं है।
जब element.remove()उस तत्व को निष्पादित किया जाता है और उसके सभी बच्चों को एक साथ डोम से हटा दिया जाएगा, तो सभी घटना संचालकों को उदाहरण के लिए संलग्न किया जाएगा element.on।
यह तत्व से जुड़े $ स्कोप को नष्ट नहीं करेगा ।
इसे और अधिक भ्रमित करने के लिए एक jQuery इवेंट भी कहा जाता है $destroy। कभी-कभी तत्वों को हटाने वाले तृतीय-पक्ष jQuery पुस्तकालयों के साथ काम करते समय, या यदि आप उन्हें मैन्युअल रूप से हटाते हैं, तो आपको उस पर सफाई करने की आवश्यकता हो सकती है:
element.on('$destroy', function () {
scope.$destroy();
});
जब एक निर्देश "नष्ट" हो जाए तो क्या करें
यह इस बात पर निर्भर करता है कि निर्देश "नष्ट" कैसे हुआ है।
एक सामान्य मामला यह है कि एक निर्देश नष्ट हो जाता है क्योंकि ng-viewवर्तमान दृश्य बदल जाता है। जब ऐसा होता है तो ng-viewनिर्देश संबंधित $ स्कोप को नष्ट कर देगा, सभी संदर्भों को उसके मूल स्कोप से अलग कर देगा और remove()तत्व को कॉल करेगा।
इसका मतलब यह है कि अगर यह दृश्य इसके लिंक फ़ंक्शन में इसके साथ एक निर्देश सम्मिलित करता है जब यह इसके द्वारा नष्ट हो जाता है ng-view:
scope.$on('anEvent', function () {
...
});
element.on('click', function () {
...
});
दोनों घटना श्रोताओं को स्वचालित रूप से हटा दिया जाएगा।
हालांकि, यह ध्यान रखना महत्वपूर्ण है कि इन श्रोताओं के अंदर का कोड अभी भी मेमोरी लीक का कारण बन सकता है, उदाहरण के लिए यदि आपने सामान्य जेएस मेमोरी लीक पैटर्न प्राप्त किया है circular references।
यहां तक कि एक निर्देश के इस सामान्य मामले में एक दृश्य बदलने के कारण नष्ट हो रहा है, ऐसी चीजें हैं जिन्हें आपको मैन्युअल रूप से साफ करने की आवश्यकता हो सकती है।
उदाहरण के लिए यदि आपने एक श्रोता को पंजीकृत किया है $rootScope:
var unregisterFn = $rootScope.$on('anEvent', function () {});
scope.$on('$destroy', unregisterFn);
यह जरूरत है क्योंकि $rootScopeआवेदन के जीवनकाल के दौरान कभी नष्ट नहीं होता है।
यदि आप किसी अन्य पब / उप कार्यान्वयन का उपयोग कर रहे हैं, तो यह तब होता है जब $ स्कोप नष्ट हो जाने पर, या यदि आपका निर्देश सेवाओं के लिए कॉलबैक से गुजरता है, तो अपने आप आवश्यक क्लीनअप नहीं करता है।
एक अन्य स्थिति रद्द करने के लिए किया जाएगा $interval/ $timeout:
var promise = $interval(function () {}, 1000);
scope.$on('$destroy', function () {
$interval.cancel(promise);
});
यदि आपका निर्देश ईवेंट हैंडलर को वर्तमान दृश्य के बाहर के तत्वों के लिए संलग्न करता है, तो आपको उन लोगों को भी मैन्युअल रूप से साफ़ करने की आवश्यकता है:
var windowClick = function () {
...
};
angular.element(window).on('click', windowClick);
scope.$on('$destroy', function () {
angular.element(window).off('click', windowClick);
});
ये कुछ उदाहरण थे कि जब कोणीय द्वारा निर्देशों को "नष्ट" किया जाता है, तो उदाहरण के लिए ng-viewया ng-if।
यदि आपके पास कस्टम निर्देश हैं जो DOM तत्वों आदि के जीवनचक्र का प्रबंधन करते हैं, तो यह निश्चित रूप से अधिक जटिल हो जाएगा।