javascript - AngularJS directive within ng-if won't run - Stack Overflow

admin管理员组

文章数量:1316974

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: / only the ng-if condition turns to true after my $http requests are loaded.

The directive is probably piled 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 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/hGnvv/ only the ng-if condition turns to true after my $http requests are loaded.

The directive is probably piled 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.

• javascript
• angularjs
• pilation
• angular-directive
• angular-ng-if

Share Improve this question Follow edited Jun 9, 2015 at 15:04 Alex Arvanitidis asked Jun 9, 2015 at 14:33 Alex ArvanitidisAlex Arvanitidis 4,46466 gold badges2828 silver badges3838 bronze badges 4

• 4 You already have a solution. Replace ng-if with ng-show – Nikhil Aggarwal Commented Jun 9, 2015 at 14:35
• 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 Commented Jun 9, 2015 at 14:36
• 2 Use ng-show if possible. Ng-if removes element from DOM, so there is no way for angular to pile it. – Michał Lach Commented Jun 9, 2015 at 14:36
• @AlexArvanitidis - 130 directives - what are you trying to do? – Nikhil Aggarwal Commented Jun 9, 2015 at 14:39

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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 bees true, the link callback should fire correctly, as seen in these examples:

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

Setting ng-if to true after $http request is loaded: http://jsfiddle/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.

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.

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

本文标签： javascriptAngularJS directive within ngif won39t runStack Overflow