angularjs - how to use ng-if for directive show/hide -

angularjs - how to use ng-if for directive show/hide -

i want show/hide template. going acheive using directives.

below code in 1 template.

<div resupload ng-if="resuploadvisible"></div>

i changed resuploadvisible value false in directive when close button clicked below.

scope.cancelupload = function () { scope.resuploadvisible = false; }; scope.openupload = function () { scope.resuploadvisible = true; };

popup div not closing resuploadvisible set false.

intresting if changed ng-if ng-show popup div opening & closing without issue.

what weired behaviour? please explain briefly.

thanks in advance.

the ngif directive removes or recreates portion of dom tree based on {expression}.

when element removed using ngif scope destroyed , new scope created when element restored.

the scope created within ngif inherits parent scope using prototypal inheritance.

an of import implication of if ngmodel used within ngif bind javascript primitive defined in parent scope. in case modifications made variable within kid scope override (hide) value in parent scope.

to prepare utilize $parent access property on parent scope:

<div resupload ng-if="$parent.resuploadvisible"></div>

angularjs