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 по умолчанию я не отображаю div с классом "hiddenStuff":

.hiddenStuff{
  display: none;
}

Но теперь в какой-то момент в коде AngularJS / JavaScript я хочу снова отобразить скрытую структуру HTML:

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

Но при этом отображается только div-элемент, а не включенный в div-элемент h3, p и теги.Как я могу отобразить все?

Спасибо

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>

, и тогда в вашем контроллере вы можете объявить переменную showDiv по умолчанию false и изменить значение showDiv на true, когда вы хотитепоказать div

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