CODEWITHSUNDEEP
javascriptcssangularjsng-animate
Mohammed A. Al Jama
Mohammed A. Al Jama

Reputation: 511

ng-if initial animation not working with a custom directive

if ng-if and a custom directive are put together on the same DOM element, the initial animation does not work.

<div ng-if="value" myDirective class="fadeMe"></div>

Here is a plunkr and clearly shows the problem. Notice that only the initial show fade fails.

More Details: I am guessing it has something to do with the priority of both directives (ngif is compiled first).

I tried to set a higher priority to the custom directive but I ran into more issues such as the child scope of the custom directive does not get destroyed by ng-if, therefore, unnecessary watchers in the custom directive keep watching values.

Upvotes: 0

Views: 324

Answers (2)

Sander Ravenhorst
Sander Ravenhorst

Reputation: 169

Seems to be related to this issue:

https://github.com/angular/angular.js/issues/14074

If you use inline template instead of templateURL in your directive it starts working.

Upvotes: 1

Khaled Awad
Khaled Awad

Reputation: 1834

It looks like there is a timing issues in data binding in Angular directive "restrict type" of class.

restrict: 'C'

So a as fast fix use

restrict: 'A'

http://plnkr.co/edit/2iB9jvpGSMi3IwelicXT

Upvotes: 1

Related Questions