如果父级具有ng-if,则角度ng-show无法正常工作 [英] Angular ng-show not working if parent has ng-if
问题描述
我有一个视图,其中父div上具有ng-if,而某些子元素上具有ng-show.嵌套在带有ng-if的元素下时,ng-show似乎无法正常工作.这是Angular错误还是我做错了什么? 看到这个小矮人.
I have a view where a parent div has ng-if on it, and some child element has ng-show on it. It seems that the ng-show isn't working correctly when nested under an element with ng-if on it. Is this an Angular bug or am I doing something wrong? See this plunker.
HTML:
<!-- with ng-if on the parent div, the toggle doesn't work -->
<div ng-if="true">
<div>
visibility variable: {{showIt}}
</div>
<div ng-show="!showIt">
<a href="" ng-click="showIt = true">Show It</a>
</div>
<div ng-show="showIt">
This is a dynamically-shown div.
<a href="" ng-click="hideIt()">Hide it</a>
</div>
</div>
<br/><br/>
<!-- with ng-show on the parent div, it works -->
<div ng-show="true">
<div>
visibility variable: {{showIt}}
</div>
<div ng-show="!showIt">
<a href="" ng-click="showIt = true">Show It</a>
</div>
<div ng-show="showIt">
This is a dynamically-shown div.
<a href="" ng-click="hideIt()">Hide it</a>
</div>
</div>
JavaScript:
The JavaScript:
scope.hideIt = function () {
scope.showIt = false;
};
谢谢
安迪
推荐答案
与ng-show
ng-if
指令创建新作用域不同.
因此,当您在ng-if
内写入showIt = true
时,将在子作用域而不是主作用域上设置showIt
属性.
So when you write showIt = true
inside the ng-if
you are setting the showIt
property on your child scope and not on your main scope.
要解决此问题,请使用$parent
来访问父级范围内的属性:
To fix it use the $parent
to access your property on your parent scope:
<div ng-if="true">
<div>
visibility variable: {{showIt}}
</div>
<div ng-show="!showIt">
<a href="" ng-click="$parent.showIt = true">Show It</a>
</div>
<div ng-show="showIt">
This is a dynamically-shown div.
<a href="" ng-click="hideIt()">Hide it</a>
</div>
</div>
演示柱塞.
这篇关于如果父级具有ng-if,则角度ng-show无法正常工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!