Search code examples
javascriptangularjscompilationangular-directiveangular-ng-if

AngularJS directive within ng-if won't run


I have a custom directive myDirective that performs a task on an element.

I have this directive in an ng-if block

<div ng-if="condition">
    <div my-directive></div>
</div>

Something like this fiddle: http://jsfiddle.net/hGnvv/ only the ng-if condition turns to true after my $http requests are loaded.

The directive is probably compiled during runtime, but never linked, so the code never runs. If I replace the ng-if by ng-show the directive works fine.

Any solutions?

Edit: I can't use ng-show because I have 130 directives within the form. 20 directives run anyway, and the other run according to my object type.

  • ng-if="type == 1" then load these elements
  • ng-if="type == 2" then load other elements etc.

If I change the ng-if to ng-show, the form takes 8s to load instead of 1s.


Solution

  • The issue wasn't that the directive wasn't running, but that the $watch functions that I had inside it didn't run at all. I didn't manage to understand the exact reason of the issue, because the same directive works fine outside ng-if.

    Anyway changed my $watch to -> $watchCollection and it works fine now, since it sees all updates to the objects I'm $watching.