AngularJS如何显示包含子元素的隐藏div？

嗨，我来帮你搞定这个问题！你遇到的情况大概率是因为子元素本身也被设置了隐藏样式，或者你用了不符合AngularJS理念的DOM操作方式。下面给你几个可行的解决方案：

方案1：用AngularJS内置指令（推荐） #

AngularJS的核心是数据驱动视图，直接手动操作DOM其实是绕开了框架的优势，用ng-show或者ng-hide指令会更简洁可靠：

1. 首先在你的控制器里定义一个控制显示的变量：

app.controller('YourController', function($scope) {
  $scope.isHiddenStuffVisible = false; // 默认隐藏

  // 当需要显示时调用这个方法（比如某个按钮点击事件）
  $scope.showHiddenContent = function() {
    $scope.isHiddenStuffVisible = true;
  };
});

2. 修改你的HTML结构，把指令绑定到div上：

<div class="hiddenStuff" ng-show="isHiddenStuffVisible">
  <h3>Game Over</h3>
  <p class="hiddenMsg">You have won!</p>
  <a href="#" class="buttonStart">Do it again!</a>
</div>

这样只要你把isHiddenStuffVisible设为true，Angular会自动处理整个div及其所有子元素的显示，完全不用手动操作DOM。

方案2：修复手动DOM操作的问题 #

如果你坚持要手动修改样式，那需要确认两个点：

• 检查你的CSS，看看h3、.hiddenMsg、.buttonStart这些子元素有没有单独设置display: none或者visibility: hidden的规则，如果有，需要把它们的样式也恢复。
• 可以通过Angular的元素方法一次性恢复子元素的默认显示：

var hiddenDiv = angular.element(document.querySelector('.hiddenStuff'));
// 显示父元素
hiddenDiv.css({display: 'block'});
// 恢复所有子元素的默认display样式（清空自定义的隐藏规则）
hiddenDiv.find('*').css({display: ''});

这里用find('*')选中所有子元素，把它们的display设为空字符串，让浏览器使用默认的显示规则。

为什么原来的方法不行？ #

display属性是不会继承的，父元素设为display: block只会让父元素本身显示，但如果子元素自己被设置了display: none，它们还是会保持隐藏状态。所以要么确保子元素没有单独的隐藏样式，要么手动把它们的样式也改回来。

内容的提问来源于stack exchange，提问作者user3193317