AngularJS directive within ng-if won't run

Question

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.

Answer 1

The ng-if condition is initially false, therefore the element does not exist in the DOM and the directive was not linked.

When the ng-if condition later becomes true, the link callback should fire correctly, as seen in these examples:

Setting ng-if to true when button is clicked: http://jsfiddle.net/q05gret0/

Setting ng-if to true after $http request is loaded: http://jsfiddle.net/fhu8ky62/1/

If you're not getting this behaviour, the problem might be with an inherited scope; check the ng-if is monitoring the same scope variable that your request is updating. This article has a few points on parent/child scope variable shadowing and other limitations.