AngularJS ng-show Не работает?

Question

Я пытаюсь изменить свой пользовательский интерфейс (ON LOAD) в зависимости от наличия или отсутствия токена. Я хотел бы показать и скрыть свой логин div и мою форму div на основе наличия или отсутствия токена. По какой-то причине я не могу заставить ng-show работать. Для упрощения задачи я следующее:

https://jsfiddle.net/m1q7h9fn/3/

HTML

<div ng-app="nh-launch"> 
    <div ng-show="loginView"> 
     <h1>Login</h1> 
    </div> 

    <div ng-show="formView"> 
     <h1>Form</h1> 
    </div> 
</div> 

JS

angular.module('nh-launch',[]).run(function($scope) { 

var token = "valid"; 

    if (token == "valid") { 
     $scope.loginView = false; 
     $scope.formView = true; 
     $scope.$apply(); 
    } 
    else { 
     $scope.loginView = true; 
     $scope.formView = false; 
     $scope.$apply(); 
    } 

}); 

Answer 1

Изменить пробег на контроллер, как:

angular.module('nh-launch', []).controller('launch-controller', function($scope) { 
 
    /* This run when page load... */ 
 
    $scope.loginView = false; 
 
    $scope.formView = true; 
 
    
 
    $scope.changeView = function() { 
 
     /* This run when click button */ 
 
     $scope.token = ($scope.token == "valid" ? "" : "valid"); 
 
     $scope.loginView = $scope.token == "valid"; 
 
     $scope.formView = $scope.token != "valid"; 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="nh-launch" ng-controller="launch-controller"> 
 
    <button type="button" ng-click="changeView();">Change</button> 
 
    <div ng-show="loginView"> 
 
    <h1>Login</h1> 
 
    </div> 
 

 
    <div ng-show="formView"> 
 
    <h1>Form</h1> 
 
    </div> 
 
</div>

Answer 2

В рамках MVC, таких как AngularJS, модель ($ scope) связана с представлением. Клей, соединяющий два, является контроллером. Вот почему в контроллере должны быть объявлены переменные $scope. Я бы реорганизовать свой код следующим образом

angular.module('nh-launch',[]) 
    .controller('myCtrl', ['$scope', function($scope) { 

     var token = "valid"; 

     if (token == "valid") { 
      $scope.loginView = false; 
      $scope.formView = true; 
      $scope.$apply(); 
     } 
     else { 
      $scope.loginView = true; 
      $scope.formView = false; 
      $scope.$apply(); 
     } 

    }]); 

А затем создать ссылку на контроллер с атрибутом ng-controller. Ваш HTML должен выглядеть следующим образом:

<div ng-app="nh-launch"> 
    <div ng-controller="myCtrl"> 
    <div ng-show="loginView"> 
     <h1>Login</h1> 
    </div> 

    <div ng-show="formView"> 
     <h1>Form</h1> 
    </div> 
    </div> 
</div> 

Answer 3

Должен быть контроллер, который должен быть связан с View. Таким образом, следующий код поможет вам получить:

<div ng-app="nh-launch"> 
    <div ng-controller="LoginCtrl"> 
     <div ng-show="loginView"> 
      <h1>Login</h1> 
     </div> 

     <div ng-show="formView"> 
      <h1>Form</h1> 
     </div> 
    </div> 
    </div> 
<script> 
    angular.module('nh-launch',[]).controller('LoginCtrl',function($scope) { 

     var token = "valid"; 

     if (token == "valid") { 
      $scope.loginView = false; 
      $scope.formView = true; 
      $scope.$apply(); 
     } 
     else { 
      $scope.loginView = true; 
      $scope.formView = false; 
      $scope.$apply(); 
     } 

    }); 
</script> 

Answer 4

вам не нужен отдельный контроллер (хотя вы должны использовать контроллер и объем в реальном мире программы).

Вы можете вводить $rootscope. $scope.$apply не требуется.

Я подправил код https://jsfiddle.net/m1q7h9fn/8/