Angular.js: पैरेंट ngMessages को DOM से हटा दिए जाने के बाद संसाधित किया गया ngMessages शामिल करें

जैसा कि शीर्षक कहता है, ngMessagesInclude संसाधित होने के बाद मूल ngMessages को DOM से हटा दिया जाता है। यह विफल रहता है क्योंकि कोणीय आंतरिक संदेशों को जोड़ने के लिए मूल नियंत्रक नहीं ढूंढ सकता है। ऐसा तब नहीं होता जब ngMessage को ngMessages तत्व के अंदर इनलाइन किया जाता है, या जब मूल तत्व अभी भी DOM पर मौजूद होता है।

इस तरह एक एनजी-संदेश लें:

<div ng-if="myForm.$submitted" ng-messages="myForm.myName.$error">
  <div ng-messages-include="messages.html"></div>
</div>

सबमिशन द्वारा ट्रिगर किया गया है:

this.change = function(myForm) {
  var self = this;
  myForm.$setSubmitted();    // event A
  $scope.$applyAsync(function () {
    self.currentStep = 'step2.html';     // event B
  });
};

घटना (ए) पर, messages.html डाउनलोड किया जाता है। क्योंकि यह $templateRequest का उपयोग करता है, सर्वर के वापस आने तक लिंकिंग रुकी हुई है। इस बीच, ईवेंट (B) ngMessages और उसके बच्चों को DOM से हटाने के साथ आगे बढ़ता है। बाद में, ngMessagesInclude सामग्री आती है और कोणीय इसे संकलित करेगा। लेकिन उस समय अब ngMessages नियंत्रक को पुनः प्राप्त करने का कोई तरीका नहीं है।

Plnkr: http://plnkr.co/edit/0GOOLERvfj7n9vDVEyZp?p=preview

अधिकांश समय, यह ngIf शर्त के साथ होगा।

संस्करण 1.4.4 के खिलाफ परीक्षण किया गया।

मुझे इससे बचने का एक तरीका मिल गया है:

ng-if="myForm.$submitted && myForm.myName.$invalid" 

घटक पक्ष पर इसे हल करने के लिए, require: '^^ngMessages' को वैकल्पिक बनाया जा सकता है और लिंकिंग के दौरान उस स्थिति की जांच करें।