Angular.js: DOM에서 상위 ngMessages가 제거 된 후 ngMessagesInclude가 처리됨

제목에서 알 수 있듯이 ngMessagesInclude는 상위 ngMessages가 DOM에서 제거 된 후 처리됩니다. angular가 내부 메시지를 연결하기위한 부모 컨트롤러를 찾을 수 없기 때문에 실패합니다. 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
  });
};

이벤트 (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' 선택 사항으로 만들고 연결 중에 해당 조건을 확인할 수 있습니다.