Can I put ng-if directive on an element which also binds to a controller

Question

I was wondering in case I have a controller and ng-if directive on the same element as in

<div foo ng-if=“ctrl.visible”>You can see me</div>

and a controller, something like

NgController(selector: ‘[foo]’,….)
class FooController { var visible = true; }

Should I see the text “You can see me" or not?

Answer 1

Here's the answer. I would not see the text. Basically, ng-if is a transcluding directive which means that the entire element is ripped out of the DOM and no other directives are instantiated until ng-if instantiates the Block, but that never happens because ctrl.visible is never even published on the scope, so it's always falsy... chicken and egg problem. Actually, it can be even worse: ctrl could be the parent controller, and if that controller happen to have visible field it can cause unpredictable behavior.