Being notified when an AngularJS Directive is hidden/shown?

Question

I have a custom directive that has to be hidden when my page loads, but later if the user clicks something it shows the directive. However, the ng-hide is placed on a parent node outside the dom node the directive lives on. This directive needs to run some code to place its components, but it has to run it when the parent dom node is shown. How can I get notified the dom has changed and the directive is now being shown so I can run my code to calculate the size?

If I don't hide the directive everything works great. However, if I hide it. It fails to render properly.

Try using ng-if instead. http://stackoverflow.com/questions/16741949/ngif-and-ngswitch-angularjs — holographic-principle, Jun 19 '13 at 22:48
ng-if doesn't appear to be available. I put it on the element and nothing happened. — chubbsondubs, Jun 19 '13 at 23:00
I think it's only available as of 1.1.5, so either get that or check out Angular-UI which has ui-if that does the same thing. @chubbsondubs — holographic-principle, Jun 19 '13 at 23:11
@finishingmove Please provide your comment as an answer so that OP can mark this question as answered... — callmekatootie, Jun 20 '13 at 04:51

score 2 · Accepted Answer · answered Jun 20 '13 at 07:11

So, while ng-show or ng-hide are ok for simple DOM elements, sometimes it's better to use ng-if and basically delay the rendering until the show condition has been met. This will in most cases avoid bad renders that can happen when things are rendering in the background using ng-hide or ng-show.

ng-if was introduced in 1.1.5 and it's basically a simplified ng-switch. It was inspired by Angular-UI's ui-if.

Being notified when an AngularJS Directive is hidden/shown?

1 Answers1