Angular.js: ngMessagesInclude processed after parent ngMessages is removed from DOM

[awerlang]

As the title says, ngMessagesInclude processed after parent ngMessages is removed from DOM. It fails because angular can't find parent controller for linking inner messages. It doesn't happen when ngMessage's are inlined inside the ngMessages element, or while parent element is still present on DOM.

Have an ng-messages like this:

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

Submission is triggered by:

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

At event (A), messages.html is downloaded. Because it uses $templateRequest, linking is stalled until server returns. Meanwhile, event (B) proceeds with the removal of ngMessages and its children from DOM. Later, ngMessagesInclude content arrives and angular will compile it. But at that point there's no way to retrieve ngMessages controller anymore.

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

Most of the time, it will happen together with an ngIf condition.

Tested against version 1.4.4.

I've found a way to avoid that:

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

To solve that at component side, the require: '^^ngMessages' could be made optional and check that condition during linking.

[jpekkala]

An easy fix would be to check if the scope has been destroyed before compiling/linking the HTML in ngMessagesInclude:

$templateRequest(src).then(function(html) {
    if (scope.$$destroyed) return;
    // ...
}

That's how ngInclude handles the same scenario.

[gkalpak]

Handling this is a similar way as ngInclude sounds reasonable.
@awerlang or @jpekkala, would you be interested in submitting a PR ?

[jpekkala]

Sure. I will submit a PR within a couple of days.