Search code examples
javascriptcssangularjsng-animate

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.

Solution

  • 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.