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.

I can't do that, I have like 130 directives on a single form. If I replace the ng-if with ng-show, all this code that has to run turns the form much slower (8s instead of ~1s). — Alex Arvanitidis
– Alex Arvanitidis, Commented Jun 9, 2015 at 14:36
Use ng-show if possible. Ng-if removes element from DOM, so there is no way for angular to compile it. — Michał Lach
– Michał Lach, Commented Jun 9, 2015 at 14:36
@AlexArvanitidis - 130 directives - what are you trying to do? — Nikhil Aggarwal
– Nikhil Aggarwal, Commented Jun 9, 2015 at 14:39

seanhodges · Accepted Answer · 2015-06-09 16:34:09Z

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.

edited Jun 9, 2015 at 16:34

answered Jun 9, 2015 at 14:39

seanhodges

17.6k17 gold badges74 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alex Arvanitidis Over a year ago

I want to run the code when the ng-if condition becomes true. The issue is that when it becomes true, the link of the directive does not run.

Alex Arvanitidis Over a year ago

Thanks for the help, this was not the issue. I managed to find it, posting it in another answer below.

Alex Arvanitidis · Accepted Answer · 2015-06-10 12:02:48Z

2

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.

answered Jun 10, 2015 at 12:02

Alex Arvanitidis

4,4946 gold badges28 silver badges38 bronze badges

Comments

Mozhdeh.Hamidi · Accepted Answer · 2017-11-12 14:59:38Z

0

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

answered Nov 12, 2017 at 14:59

Mozhdeh.Hamidi

615 bronze badges

Collectives™ on Stack Overflow

AngularJS directive within ng-if won't run

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related