Angular ng-show 在初始页面加载时不起作用

Question

我正在使用 Angular 的 ng-show 指令来更改问题在测验中的显示方式，然后在测验完成时显示结果。除了第一个问题外，一切都按预期工作。当测验加载时，我初始化 $scope.image = false。出于某种原因，带有 ng-show="image" 的 div 和带有 ng-show="!image" 的 div 都会出现。我希望只有带有 ng-show="!image" 的 div 会出现。相关代码如下。注意：为了节省空间，我没有在控制器或 index.html 中包含我所有的问题或结果对象，其中我包含了正确的 ng-app 标头等：

html:

<div class="jumbotron text-center" ng-hide="quizComplete" ng-show="!image">
    <h3>{{ questions[number].ask }}</h3>
    <div class="row">
        <div ng-repeat="answer in questions[number].answers" class="choice">
            <div ng-click="recordChoice(answer.points)">
                <span class="centerer"></span>
                    <span class="centered">{{ answer.choice }}</span>
            </div>
        </div>
    </div>
</div>

<div class="jumbotron text-center" ng-hide="quizComplete" ng-show="image">
    <h3>{{ questions[number].ask }}</h3>
    <div class="row">
        <div ng-repeat="answer in questions[number].answers" class="choice">
            <div ng-click="recordChoice(answer.points)">
                <img ng-src="/img/{{ answer.img }}.jpg" alt="" class="img-responsive">
            </div>
        </div>
    </div>
</div>

<div class="jumbotron text-center" ng-show="quizComplete">
    <h2>{{ results[result].title }}</h2>
    <p>{{ results[result].details }}</p>
</div>

控制器：

angular.module('NerdCtrl', []).controller('NerdController', function($scope, $routeParams) {

    $scope.questions = [{"ask": "Choose a Social Media platform:", "answers": [{"choice": "Facebook", "points": 2, "img": "Facebook"}, {"choice": "Twitter", "points": 3, "img": "Twitter"}, {"choice": "Google+", "points": 1, "img": "GooglePlus"}]}];

    $scope.results = [{title: "The Mummy", details: "You are the original..."}];


    $scope.number = 0;
    $scope.tallyMummy = 0;
    $scope.tallyFrankenstein = 0;
    $scope.tallyWolfman = 0;
    $scope.tallyJeckyll = 0;
    $scope.image = false;
    $scope.quizComplete = false;

    $scope.recordChoice = function(points) {
        if ($scope.number < 9) {
            switch(points) {
                case 1:
                    $scope.tallyMummy++;
                    break;
                case 2:
                    $scope.tallyFrankenstein++;
                    break;
                case 3:
                    $scope.tallyWolfman++;
                    break;
                case 4:
                    $scope.tallyJeckyll++;
                    break;
            }
            $scope.number++;
            if ($scope.number === 1 || $scope.number === 6 || $scope.number === 7 || $scope.number === 9) {
                $scope.image = true;
            } else {
                $scope.image = false;
            }
        } else {
            $scope.quizComplete = true;
            $scope.result = 0;
        }
    };
});

Answer 1

如果你像这样一起使用 ng-hide 和 ng-show 并且 ng-hide 评估为 false，我的猜测是两个 div 都应该显示。您是否尝试过只使用一个来确保您的方法正常工作并且图像具有正确的价值？如果是这样，添加另一个 div 作为包装器并将其用于 ng-hide，这样它们就不会互相争斗。