Why angularjs ignore ng-if?

Question

i try use ng-if, but angular no compile him. Look in test code:

<ul class="tmmenu-admin-tabs-builder-panel-answer">
                        <li class="tmmenu-admin-tabs-builder-panel-portlet" ng-repeat="answer in answers">
                            <div>
                                <span ng-repeat="question in questions">
                                    <label ng-repeat="answer in question.answers">
                                        <input type="checkbox">{{question.id}}.{{answer.id+1}}
                                        <span ng-if="test()">ddd</span>
                                    </label>
                                </span>
                            </div>
                            <textarea>{{answer.text}}</textarea>
                        </li>
                    </ul>

and function test:

$scope.test = function(){
        console.log('d');
        return false;
    }

if run this page, we can see "ddd" in "Li" despite to test return false.

Next step, i replaced at "ng-if" "ng-show" :

<ul class="tmmenu-admin-tabs-builder-panel-answer">
    ...
    <span ng-show="test()">ddd</span>
    ...
</ul>

And its working, "ddd" hide. Why ng-if not working where working ng-show?

works fine in a simple non repeating situation. Create a demo in plnkr.co or jsfiddle.net that replicates problem — charlietfl, Sep 01 '14 at 21:25

score 1 · Answer 1 · answered Sep 01 '14 at 20:23

The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.

The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute. The element is shown or hidden by removing or adding the ng-hide CSS class onto the element. The .ng-hide CSS class is predefined in AngularJS and sets the display style to none (using an !important flag). For CSP mode please add angular-csp.css to your html file (see ngCsp).

Ok, but why ng-if not remove my ddd block? Test() all time return false. — Citrael, Sep 01 '14 at 20:42

score 0 · Answer 2 · answered Sep 01 '14 at 23:06

Could be a scope problem, is there something in a child scope that might override the value for test? ng-if works fine for me (plunker). I assume that everything else is working fine, are you seeing 'd' in the console to show that your function is getting executed?

Try changing your tag to this to help debug and you should see that it is a function:

<span ng-if="test()">test is: {{test.toString()}}</span>

Why angularjs ignore ng-if?

2 Answers2