Angular.js: ngMessagesInclude обрабатывается после удаления родительского ngMessages из DOM

Как сказано в заголовке, ngMessagesInclude обрабатывается после удаления родительского ngMessages из DOM. Это не удается, потому что angular не может найти родительский контроллер для связывания внутренних сообщений. Этого не происходит, когда ngMessage встроены внутри элемента ngMessages или пока родительский элемент все еще присутствует в DOM.

Создайте такие ng-сообщения:

<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
  });
};

В событии (A) загружается messages.html . Поскольку он использует $templateRequest , связывание останавливается, пока сервер не вернется. Между тем, событие (B) продолжается с удалением ngMessages и его дочерних элементов из DOM. Позже прибывает контент ngMessagesInclude, и angular его скомпилирует. Но в этот момент нет возможности получить контроллер ngMessages .

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

В большинстве случаев это происходит вместе с условием ngIf .

Проверено на версии 1.4.4.

Я нашел способ избежать этого:

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

Чтобы решить эту проблему на стороне компонента, require: '^^ngMessages' можно сделать необязательным и проверять это условие во время связывания.