Question

我使用整数来表示我的应用程序中的状态，其中我有几个使用<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>

如果有人能解释为什么会发生这种情况，那就会有很多帮助。

Answer 1

代码中存在许多问题：

要获取应用实例，请使用getter，将第二个参数作为空数组传递给module()。 ==＆GT; angular.module('CharCount', [])
在$timeout内部回调中，变量state被分配了一个字符串。
```
$scope.state = 1;
$scope.state = "loading"; // This is incorrect
```
由于视图中没有条件且所有其他条件都被评估为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>

更新ng-if变量后，Angular显示空屏幕

1 个答案: