Question

是否可以阻止ng-show对特定子元素的影响。

假设我有以下HTML。

<div ng-show="showParent" class="parent">
   <div class="childOne"></div>        <!-- don't hide this -->
   <div class="childTwo"></div>
</div>

现在我想要实现的是隐藏除childOne之外的所有内容。实际上隐藏了一个父母，但其中一个或一些孩子？

Answer 1

不，你不能。 HTML标准阻止了这一点。当隐藏父级时，所有子级都会隐藏，而AngularJS只是将内容添加到HTML中，它不会对其进行更改。

但是，AngularJS允许一个变量控制多个元素，并且可以帮助我们获得您想要的相同效果。所以，让我们回到你真正想要完成的事情。要做到这一点，我们需要您在此问题中提供的更多详细信息，以使问题更小（并感谢您）。怎么样只是隐藏childTwo不适合你呢？父母还有其他需要隐藏的东西吗？我们可以将它们放在单独的元素（div或span或其他东西）中，并隐藏那些与隐藏ChildTwo相同的变量。父母是否有一些你需要隐藏的格式（比如边框或其他东西）？我们可以根据我们用来隐藏其他元素的相同变量来更改父级上的类，这些变量会删除边框和任何其他样式，有效地使其不可见，尽管在技术上仍存在于DOM中。

Answer 2

ngShow依赖于CSS类（.ng-hide）。您可以使用自己更具体的选择器覆盖该类，仅用于要从指令中排除的div。

<div class="parent" ng-show="showParent">
  <div class="childOne nghide-override"></div>
  <div class="childTwo"></div>
</div>

来源：https://docs.angularjs.org/api/ng/directive/ngShow

（我现在无法对此进行测试，但如果不起作用，我会很快嘲笑并编辑/移除它。）

您也可以将孩子分成div并隐藏第二个div：

<div class="parent">
  <div class="shown children">
    <div class="childOne"></div>
  </div>
  <div class="hidden children" ng-show="showParent">
    <div class="childTwo"></div>
  </div>
</div>

Answer 3

使用Jquery unwrap。在您的应用程序中包含jquery：

bower install jquery --save

设置准备解包到指定的div：

<script type="text/javascript">
$(document).ready(function() {
$(".childOne").unwrap();
});
</script>

防止对孩子的ng-show效果

3 个答案: