ng-show not working with ng-include

Question

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".

score 4 · Accepted Answer · answered Jan 27 '16 at 08:02

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

It helped me a lot, god bless your coding skills – vivex Jan 27 '16 at 11:37 — vivex, Jan 27 '16 at 11:37

score 2 · Answer 2 · edited May 23 '17 at 10:29

2

I think the problem is because ng-include creates new scope and the asdf is shadowed by local version of this scope.

This is well known issue. You can put the variables inside inner struct (e.g change asdf to input.asdf and initialize input to {}) or (more advanced) use the controller as construct.

look here: https://stackoverflow.com/a/14146317/115198

edited May 23 '17 at 10:29

Community

1
1

answered Jan 27 '16 at 07:48

eran

6,731
6
35
52

score 2 · Answer 3 · answered Jan 27 '16 at 08:03

2

This is because with ng-include new child scope is created in the included file and outer scope becomes parent scope.

So you should try like below in _include.html

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

Hope it helps!

answered Jan 27 '16 at 08:03

vamshi krishna kurella

332
1
10

1

Complete copy of my answer. – Sardesh Sharma Jan 27 '16 at 08:31
1

I havent seen ur answer man... I have seen it only after I posted it! – vamshi krishna kurella Jan 27 '16 at 08:51

ng-show not working with ng-include

3 Answers3