Home » Javascript » ng-if not updating on scope destroy

ng-if not updating on scope destroy

Posted by: admin November 1, 2017 Leave a comment


I have an isolate scope directive. In this directive’s link function I am compiling an html template and appending it to the document body.

const template = `<div ng-if="vm.open"></div>`;

I have a button that toggles the vm.open flag on an ng-click. This works fine to show/hide my div. However, when I press the back button, my scope destroy event handler gets called and sets the vm.open to false. But in my DOM vm.open is still true.

Is this because ng-if made a new scope and since my directive is the ‘parent’ it doesn’t destroy the ng-if’s scope? I found another stackOverflow thread where using ng-show fixes this issue, which it does. But I would like to understand why it doesn’t work with an ng-if.