While working on a isolate scope directive, I encountered an issue. In the link function of this directive, I am compiling an HTML template and then appending it to the body of the document.
const template = `<div ng-if="vm.open"></div>`;
body.append(template);
I have a button that toggles the vm.open flag on an ng-click event. This allows me to show/hide the div element as intended. However, I noticed that when I press the back button, my scope's destroy event handler is triggered which sets vm.open to false. Despite this, in the DOM, vm.open still remains true.
I suspect this might be due to the use of ng-if creating a new scope within the directive, and since the directive acts as the parent, it does not fully destroy the nested ng-if scope. Interestingly, after researching on StackOverflow, I discovered that replacing ng-if with ng-show resolves this issue. Nonetheless, I am curious to understand why ng-if behaves differently in this scenario.