I am trying to change my UI (ON LOAD) based on whether or not a token is present. I would like to show and hide my login div and my form div based on whether or not the token is present. For whatever reason, I cannot get ng-show to work. To simplify the problem I have the following:
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();
}
});
Change run to controller as:
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>
In MVC frameworks like AngularJS, the model ($scope) ties to the view. The glue connecting the two is the controller. That's why $scope
variables should be declared in the controller. I would reorganize your code as follows
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();
}
}]);
And then create a reference to the controller with the ng-controller
attribute. Your HTML should look as follows
<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>
There must be a controller which should be bound with View. So the following code will help you to get:
<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>
you don't need a separate controller (although you should use a controller and scope in real-world program).
You can inject the $rootscope. $scope.$apply
$rootscope. $scope.$apply
is not required.
I have tweaked your code https://jsfiddle.net/m1q7h9fn/8/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.