javascript - AngularJS 显示带有子元素的 div

Question

我想编写一个简单的 AngularJS 网站，我可以在其中显示最初隐藏的 HTML 元素(及其所有子元素)。

我必须遵循 HTML 结构(摘录):

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

默认情况下，在 CSS 中我不显示类为“hiddenStuff”的 div:

.hiddenStuff{
  display: none;
}

但现在在 AngularJS/JavaScript 代码中的某个点我想再次显示隐藏的 HTML 结构:

angular.element(document.querySelector('.hiddenStuff')).css({display:'block'});

但这只显示 div 元素，而不显示 div 元素中包含的 h3、p 和 a 标签。我怎样才能显示所有内容？

谢谢

Answer 1

我认为最好的方法是使用 ng-show

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

然后在您的 Controller 中，您可以将变量 showDiv 默认声明为 false，并在您想要显示 div 时将 showDiv 的值更改为 true

https://docs.angularjs.org/api/ng/directive/ngShow