Ни ng-hide, ни ng-show не изменяют видимость элемента

Question

Я начал использовать AngularJS, и я решил сделать список, когда я нажимаю на кнопку. Мой код довольно прост, но он не работает, и я не понимаю, почему:

<div ng-app="myGame" ng-controller="gameCtrl">
    <h1>{{showLevels}}</h1>
    <p ng-show="showLevels">
        <ul>
            <li>Level 1</li>
            <li>Level 2</li>
            <li>Level 3</li>
        </ul>
    </p>
    <button ng-click="toggle()">Begin Game !</button>
</div>

И в файле JavaScript:

var app = angular.module("myGame", []);
app.controller("gameCtrl", function ($scope) {
    $scope.showLevels = false;
    $scope.toggle = function () {
        $scope.showLevels = !$scope.showLevels;
    };
});

Уровни всегда отображаются, использую ли я ngShow или же ngHide директива, несмотря на то, что $scope.showLevels переключается, как я вижу рядом с названием.

Откуда эта проблема?

Answer 1

Элемент абзаца<p> может принимать только фразы, а неупорядоченный элемент списка<ul> не такой контент.

Поэтому ваш браузер переводит ваш код в другой, что делает его более понятным, принимая <ul> вне <p>, Ваш HTML на самом деле:

<p ng-show="showLevels"></p>
<ul>
    <li>Level 1</li>
    <li>Level 2</li>
    <li>Level 3</li>
</ul>

Вот почему ваш список всегда виден, независимо от содержания $scope.showLevels переменная. Решение состоит в том, чтобы использовать другой элемент, элемент разделения документа<div> например, или полностью удалить этот промежуточный элемент:

<ul ng-show="showLevels">
    <li>Level 1</li>
    <li>Level 2</li>
    <li>Level 3</li>
</ul>