0

I have an angular snippet that can be simplified to this view:

<div ng-if="vm.selectedItem !== null">

    <div ng-if="vm.selectedItem.someProperty !== null">         
    </div>

</div>

I expect that internal div would not execute it's expression if the top div is not added to DOM based on ng-if, but in reality I get Cannot read property 'someProperty' of null when something changes.

Is it the default behavior of angular and there are not guarantee on the order here and I cannot rely on the outer div ng-if's?

Ilya Chernomordik
  • 27,817
  • 27
  • 121
  • 207

1 Answers1

2

Beware: ng-if creates it's own scope...

You could use ng-show instead of ng-if: it doesn't create child scope...

MarcoS
  • 17,323
  • 24
  • 96
  • 174
  • Yes, I have done that already, I just wanted to understand why this is happening. I was also using ng-if since it's more "efficient" as far as I understand (don't render dom compare to not showing it) – Ilya Chernomordik Apr 12 '16 at 09:48
  • I think ng-if will not avoid rendering DOM (it is built before angular takes place...), but it **removes** elements from the DOM, if the condition is not met... So, no, it probably will not be *faster*... (see also http://stackoverflow.com/questions/19177732/what-is-the-difference-between-ng-if-and-ng-show-ng-hide). – MarcoS Apr 12 '16 at 09:55