This repository was archived by the owner on Apr 12, 2024. It is now read-only.
This repository was archived by the owner on Apr 12, 2024. It is now read-only.
App freezes when using a directive that transcludes ng-message #14183
Closed
Description
I'm trying to create a directive that contains some common css classes and hide/show logic that I use for all my ng-messages
. it looks like this
var StandardMessagesComponent = function() {
}
angular.module('myApp').component('standardMessages', {
controller: StandardMessagesComponent,
controllerAs: 'ctrl',
templateUrl: 'standardMessages.html',
transclude: true,
bindings: {
form: '<',
field: '@'
}
});
<ng-messages for="ctrl.form[ctrl.field].$error" role="alert" class="standard-messages"
ng-if="ctrl.form[ctrl.field].$error && (ctrl.form.$submitted || ctrl.form[ctrl.field].$touched)"
>
<ng-transclude></ng-transclude>
</ng-messages>
It is causing my app to freeze when the following is true:
-there is a validation error causing one of the ng-message
s to be shown
-there are multiple ng-message
elements
-The user navigates to another page
The following plunkr reproduces the issue: https://plnkr.co/edit/Qi2JQ4RioAOxZG98uCou?p=preview
To crash the app click the input and then click the "other page" link.
I'm using Angular 1.5, angular-messages 1.5, and ui-router 0.2.18. This issue exists in Chrome and Firefox but works fine in IE11 (although it freezes for a second)