ng-show 不适用于 ng-include

Question

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

我有两个文件： -index.html（这使用了 ng-include - 不起作用） -index_embedded.html（使用相同的代码但不使用包含 - WORKS）

嗨，我的问题是当我点击 "CLICK ME"，然后点击 "CLOSE"，然后再次尝试点击 "CLICK ME"，它不再有效。

当我使用相同的代码而不使用 ng-include 时，我可以点击 "CLICK ME"、"CLOSE"，然后再次点击 "CLICK ME"。

为什么仅当代码在包含文件中时这不起作用？

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

问题是当代码被放置在一个包含文件中时，它在命中 "CLOSE" 后中断。

Answer 1

我认为问题是因为 ng-include 创建了新的作用域并且 asdf 被该作用域的本地版本覆盖。

这是众所周知的问题。您可以将变量放在内部结构中（例如，将 asdf 更改为 input.asdf 并将输入初始化为 {}）或（更高级）使用控制器作为构造。

看这里：

Answer 2

第一次它从 parent 继承 asdf 的值，直到您单击 CLOSE[= 后还没有单击关闭22=] 它正在创建具有本地范围的 asdf，单击 CLICK ME 不再受影响，因此您可以使用 $parent.asdf 在始终引用 parent.

的包含文件中
请查看更新后的插件

<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

Answer 3

这是因为 ng-include 在包含的文件中创建了新的子作用域，并且外部作用域成为父作用域。

所以你应该像下面那样在 _include.html

中尝试

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

希望对您有所帮助！

ng-show 不适用于 ng-include

ng-show not working with ng-include

angularjs

partials

ng-show

angularjs-ng-include