Angular.js: ngMessagesInclude procesado después de que el padre ngMessages se elimine del DOM

Como dice el título, ngMessagesInclude se procesa después de que el padre ngMessages se elimina del DOM. Falla porque angular no puede encontrar el controlador principal para vincular mensajes internos. No sucede cuando ngMessage están alineados dentro del elemento ngMessages , o mientras el elemento padre todavía está presente en DOM.

Tenga un mensaje ng como este:

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

La presentación se desencadena por:

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

En el evento (A), se descarga messages.html . Debido a que usa $templateRequest , la vinculación se detiene hasta que el servidor regresa. Mientras tanto, el evento (B) procede con la eliminación de ngMessages y sus hijos de DOM. Más tarde, llega el contenido de ngMessagesInclude y angular lo compilará. Pero en ese momento ya no hay forma de recuperar el controlador ngMessages .

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

La mayoría de las veces, sucederá junto con una condición ngIf .

Probado con la versión 1.4.4.

Encontré una manera de evitar eso:

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

Para resolver eso en el lado del componente, el require: '^^ngMessages' podría hacerse opcional y verificar esa condición durante el enlace.