CODEWITHSUNDEEP
javascriptangularjs
Hobbyist
Hobbyist

Reputation: 16192

Angular shows empty screen after updating ng-if variable

I'm using an integer to represent a state in my application, in which I have several(3) containers using <div ng-if="state == value"> to display the proper information for that page. The issue is that when state changes, the screen turns white. No errors, no nothing. It's just blank.

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>

If anyone can explain why this happens, It'd help a lot.

Upvotes: 0

Views: 207

Answers (1)

Tushar
Tushar

Reputation: 87203

There are many problems in the code:

  1. To get the app instance use the getter, pass the second parameter to the module() as empty array. ==> angular.module('CharCount', [])

  2. Inside $timeout callback, the variable state is assigned a string.

    $scope.state = 1;
$scope.state = "loading"; // This is incorrect

    As there is no condition in the view and all other conditions are evaluated to false, no element will be shown.

  3. Logical Error: The values should be set before calling the $timeout.

    $scope.state = 1;
$scope.stateText = "loading";

    Move these statements above $timeout.

Demo:

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>

Upvotes: 1

Related Questions