Search code examples
angularjspartialsng-showangularjs-ng-include

ng-show not working with ng-include


http://plnkr.co/edit/0CAgXsX847n9LfIG4Fzj?p=preview

I have two files: -index.html (This uses an ng-include - DOESNT WORK) -index_embedded.html (Uses same code but without using an include - WORKS)

Hi, my problem here is when I hit "CLICK ME", then hit "CLOSE", then try to hit "CLICK ME" again, it no longer works.

When I use the same code without using the ng-include, i'm able to hit "CLICK ME", "CLOSE", and then "CLICK ME" again.

Why is this not working only when the code is in an include file?

<h2 ng-click="asdf = !asdf">CLICK ME</h2>

<!-- <div ng-include="'partials/audiencenav.html'"></div> -->
<!-- extracted code from the include and pasted below, i'm able to successfully  CLICK, CLOSE, and CLICK again -->
<div class="" ng-show="asdf">
    <div ng-click="asdf = !asdf"><h2>CLOSE</h2></div>   
</div>  

The problem is when the code is used placed in an include file, it breaks after hitting "CLOSE".


Solution

  • First time it is inheriting the value of asdf from parent until you have not clicked on close once you have clicked on CLOSE it is creating asdf with local scope which is no more affected by clicking on CLICK ME, so you can use $parent.asdf in include file which will always refers to parent.

    Please see the updated plunker

    <div class="" ng-show="$parent.asdf">
        <div ng-click="$parent.asdf = !$parent.asdf"><h2>CLOSE</h2></div>   
     </div>
    

    http://plnkr.co/edit/9wmKTR8HPw54K95XqapA?p=preview