Skip to content
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
@robianmcd

Description

@robianmcd

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-messages 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)

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions