AngularJS ng-show 不工作?
AngularJS ng-show Not Working?
我正在尝试根据是否存在令牌来更改我的 UI (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();
}
});
将 运行 控制器更改为:
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>
在像 AngularJS 这样的 MVC 框架中,模型($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>
必须有一个与视图绑定的控制器。所以下面的代码将帮助你得到:
<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>
您不需要单独的控制器(尽管您应该在实际程序中使用控制器和范围)。
您可以注入 $rootscope. $scope.$apply
不需要。
我已经调整了你的代码
https://jsfiddle.net/m1q7h9fn/8/
我正在尝试根据是否存在令牌来更改我的 UI (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();
}
});
将 运行 控制器更改为:
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>
在像 AngularJS 这样的 MVC 框架中,模型($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>
必须有一个与视图绑定的控制器。所以下面的代码将帮助你得到:
<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>
您不需要单独的控制器(尽管您应该在实际程序中使用控制器和范围)。
您可以注入 $rootscope. $scope.$apply
不需要。
我已经调整了你的代码 https://jsfiddle.net/m1q7h9fn/8/