{"action":"created","issue":{"url":"https://api.github.com/repos/angular/angular.js/issues/12695","repository_url":"https://api.github.com/repos/angular/angular.js","labels_url":"https://api.github.com/repos/angular/angular.js/issues/12695/labels{/name}","comments_url":"https://api.github.com/repos/angular/angular.js/issues/12695/comments","events_url":"https://api.github.com/repos/angular/angular.js/issues/12695/events","html_url":"https://github.com/angular/angular.js/issues/12695","id":103550232,"number":12695,"title":"ngMessagesInclude processed after parent ngMessages is removed from DOM","user":{"login":"awerlang","id":589286,"avatar_url":"https://avatars.githubusercontent.com/u/589286?v=3","gravatar_id":"","url":"https://api.github.com/users/awerlang","html_url":"https://github.com/awerlang","followers_url":"https://api.github.com/users/awerlang/followers","following_url":"https://api.github.com/users/awerlang/following{/other_user}","gists_url":"https://api.github.com/users/awerlang/gists{/gist_id}","starred_url":"https://api.github.com/users/awerlang/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/awerlang/subscriptions","organizations_url":"https://api.github.com/users/awerlang/orgs","repos_url":"https://api.github.com/users/awerlang/repos","events_url":"https://api.github.com/users/awerlang/events{/privacy}","received_events_url":"https://api.github.com/users/awerlang/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/angular/angular.js/labels/component:%20ngMessages","name":"component: ngMessages","color":"c7def8"},{"url":"https://api.github.com/repos/angular/angular.js/labels/frequency:%20low","name":"frequency: low","color":"bfe5bf"},{"url":"https://api.github.com/repos/angular/angular.js/labels/severity:%20confusing","name":"severity: confusing","color":"cd19e7"},{"url":"https://api.github.com/repos/angular/angular.js/labels/type:%20bug","name":"type: bug","color":"000000"}],"state":"open","locked":false,"assignee":null,"milestone":{"url":"https://api.github.com/repos/angular/angular.js/milestones/27","html_url":"https://github.com/angular/angular.js/milestones/Backlog","labels_url":"https://api.github.com/repos/angular/angular.js/milestones/27/labels","id":489171,"number":27,"title":"Backlog","description":"Holds the backlog of issues and pull requests that have been triaged.\r\n\r\nBefore assigning items to this milestone they should be labelled, at the very least with the correct \"type\" label (i.e. \"issue\", \"pr\", \"bug\", \"regression\", \"chore\", \"docs\", etc).  Preferably you should also check for duplicate issues/PRs, note CLA status and assign \"complexity\" and \"impact\" labels too.","creator":{"login":"IgorMinar","id":216296,"avatar_url":"https://avatars.githubusercontent.com/u/216296?v=3","gravatar_id":"","url":"https://api.github.com/users/IgorMinar","html_url":"https://github.com/IgorMinar","followers_url":"https://api.github.com/users/IgorMinar/followers","following_url":"https://api.github.com/users/IgorMinar/following{/other_user}","gists_url":"https://api.github.com/users/IgorMinar/gists{/gist_id}","starred_url":"https://api.github.com/users/IgorMinar/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/IgorMinar/subscriptions","organizations_url":"https://api.github.com/users/IgorMinar/orgs","repos_url":"https://api.github.com/users/IgorMinar/repos","events_url":"https://api.github.com/users/IgorMinar/events{/privacy}","received_events_url":"https://api.github.com/users/IgorMinar/received_events","type":"User","site_admin":false},"open_issues":595,"closed_issues":1224,"state":"open","created_at":"2013-11-18T23:30:35Z","updated_at":"2016-05-09T20:41:47Z","due_on":null,"closed_at":null},"comments":1,"created_at":"2015-08-27T16:46:49Z","updated_at":"2016-05-10T10:16:29Z","closed_at":null,"body":"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.\r\n\r\nHave an ng-messages like this:\r\n\r\n```html\r\n<div ng-if=\"myForm.$submitted\" ng-messages=\"myForm.myName.$error\">\r\n  <div ng-messages-include=\"messages.html\"></div>\r\n</div>\r\n```\r\nSubmission is triggered by:\r\n\r\n```js\r\nthis.change = function(myForm) {\r\n  var self = this;\r\n  myForm.$setSubmitted();    // event A\r\n  $scope.$applyAsync(function () {\r\n    self.currentStep = 'step2.html';     // event B\r\n  });\r\n};\r\n```\r\n\r\nAt 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.\r\n\r\nPlnkr: http://plnkr.co/edit/0GOOLERvfj7n9vDVEyZp?p=preview\r\n\r\nMost of the time, it will happen together with an `ngIf` condition.\r\n\r\nTested against version 1.4.4.\r\n\r\nI've found a way to avoid that:\r\n\r\n```js\r\nng-if=\"myForm.$submitted && myForm.myName.$invalid\" \r\n```\r\n\r\nTo solve that at component side, the `require: '^^ngMessages'` could be made optional and check that condition during linking."},"comment":{"url":"https://api.github.com/repos/angular/angular.js/issues/comments/218116422","html_url":"https://github.com/angular/angular.js/issues/12695#issuecomment-218116422","issue_url":"https://api.github.com/repos/angular/angular.js/issues/12695","id":218116422,"user":{"login":"jpekkala","id":11703798,"avatar_url":"https://avatars.githubusercontent.com/u/11703798?v=3","gravatar_id":"","url":"https://api.github.com/users/jpekkala","html_url":"https://github.com/jpekkala","followers_url":"https://api.github.com/users/jpekkala/followers","following_url":"https://api.github.com/users/jpekkala/following{/other_user}","gists_url":"https://api.github.com/users/jpekkala/gists{/gist_id}","starred_url":"https://api.github.com/users/jpekkala/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jpekkala/subscriptions","organizations_url":"https://api.github.com/users/jpekkala/orgs","repos_url":"https://api.github.com/users/jpekkala/repos","events_url":"https://api.github.com/users/jpekkala/events{/privacy}","received_events_url":"https://api.github.com/users/jpekkala/received_events","type":"User","site_admin":false},"created_at":"2016-05-10T10:16:29Z","updated_at":"2016-05-10T10:16:29Z","body":"An easy fix would be to check if the scope has been destroyed before compiling/linking the HTML in ngMessagesInclude:\r\n```\r\n$templateRequest(src).then(function(html) {\r\n    if (scope.$$destroyed) return;\r\n    // ...\r\n}\r\n```\r\nThat's how ngInclude handles the same scenario."}}