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

Answer 2

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.

Answer 3

for example if your model is like $scope.item = true and you use it like ng-if="item" you should change your model to $scope.myvalue = {} and use like this : ng-if="myvalue.item" , at all I mean you should use object property for ng-if not a simple value