我使用一个整数来表示我的应用程序中的状态，其中我有几个(3)容器使用 <div ng-if="state == value">显示该页面的正确信息。问题是当 state变化，屏幕变白。没有错误，什么也没有。只是空白。
angular.module('CharCount')
.controller('MainCtrl', function($scope, $timeout) {
$scope.state = 0;
$scope.stateText = "waiting";
$scope.clicked = function() {
$timeout(function() {
$scope.state = 1;
$scope.state = "loading";
$scope.test(null, function() {
$scope.state = 2;
$scope.state = "finished, should show State C";
});
});
};
$scope.test = function(a, callback) {
$timeout(callback);
};
});<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
</head>
<body ng-app="CharCount">
<div ng-controller="MainCtrl">
<div ng-if="state == 0">
State A<br>
{{stateText}}<br>
<button ng-click="clicked()">click me</button>
</div>
<div ng-if="state == 1">
State B<br>
{{stateText}}
</div>
<div ng-if="state == 2">
State C<br>
{{stateText}}
</div>
</div>
<script src="angular-character-count.js"></script>
<script src="app.js"></script>
</body>
</html>如果有人能解释为什么会发生这种情况，那会有很大帮助。
最佳答案
代码中存在很多问题:
- 要使用 getter 获取应用实例，请将第二个参数作为空数组传递给
module()。 ==>angular.module('CharCount', []) 在
$timeout回调中，变量state被分配了一个字符串。$scope.state = 1; $scope.state = "loading"; // This is incorrect由于 View 中没有条件，并且所有其他条件都评估为 false，因此不会显示任何元素。
逻辑错误:应在调用
$timeout之前设置值。$scope.state = 1; $scope.stateText = "loading";将这些语句移至
$timeout之上。
演示:
angular.module('CharCount', []) // <--- #1
.controller('MainCtrl', function($scope, $timeout) {
$scope.state = 0;
$scope.stateText = "waiting";
$scope.clicked = function() {
$scope.state = 1; // <--- #3
$scope.stateText = "loading"; // <--- #2
$timeout(function() {
$scope.test(null, function() {
$scope.state = 2;
$scope.stateText = "finished, should show State C"; // <--- #2
});
}, 1000);
};
$scope.test = function(a, callback) {
$timeout(callback);
};
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<body ng-app="CharCount">
<div ng-controller="MainCtrl">
<div ng-if="state == 0">
State A
<br>{{stateText}}
<br>
<button ng-click="clicked()">click me</button>
</div>
<div ng-if="state == 1">
State B
<br>{{stateText}}
</div>
<div ng-if="state == 2">
State C
<br>{{stateText}}
</div>
</div>
</body>关于javascript - 更新 ng-if 变量后，Angular 显示空屏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36613898/