[英]AngularJS ng-show and ng-hide doesn't work
在这里遇到angularjs逻辑问题
我只想在没有用户登录时显示登录链接,而仅显示登录用户的注销链接,但无法正常工作
我的HTML
<section ng-controller="a" ng-show="auth = false">
<a href="#/signin" ng-click="signin()"> Sign in </a>
</section>
<section ng-controller="b" ng-show="auth = true">
<a href="#/signout" ng-click="signout()"> Sign out </a>
</section>
登录工作正常
这是我的控制器
登录控制器
function ($scope, Service){
$scope.auth = true;
$scope.signin = function($event, userID, passwd){
Service.signin(userID,passwd).then(
function (response){
$scope.auth = true;
});
}]).
注销控制器
function ($scope, Service){
$scope.auth = false;
$scope.signout = function($event){
Service.signout().then(
function (response){
$scope.auth = false;
});
}]).
那两个注销和登录链接基本上在我的主页上。 我不想创建很多页面,因此我想彼此隐藏。 当用户单击“登录”链接时,它将运行angularjs路由器,在本例中为/ login,该表单还有另一个templateURL,它将直接附加到主页上。 用户输入用户名和密码后,用户需要单击“提交”按钮,这是代码
<form role="form" name="form1">
<label for"userID">UserID</label><input type="text" id="userID" ng-model="userID">
<label for"passwd">Password</label><input type="text" id="passwd" ng-model="passwd">
<button data-ng-click="signin($event,userID,passwd); reload()">Login</button>
reload()函数将直接刷新页面。 我正在使用$ window.location.reload()
您的均等比较不正确。
这为auth分配了false值:
ng-show="auth = false"
您想要的是(双倍和三倍等于进行比较)
ng-show="auth === false"
您也可以这样做:
<section ng-controller="a" ng-show="!auth">
<a href="#/signin" ng-click="signin()"> Sign in </a>
</section>
<section ng-controller="b" ng-show="auth">
<a href="#/signout" ng-click="signout()"> Sign out </a>
</section>
实际上,您需要完成两项工作才能完成此任务
您需要在$rootScope
分配auth
varibale而不是$scope
。 因为此对象在两个控制器中使用。
喜欢
function ($scope, dataService, $rootScope){
$scope.auth = true;
$scope.signin = function($event, userID, passwd){
Service.signin(userID,passwd).then(
function (response){
$rootScope.auth = true;
});
}]).
您需要将ng-show="auth = false"
更改为ng-show="auth === false"
。 您使用了单等号。 它应该是两倍或三倍相等
要么
如果在$ rootScope中分配了该对象,则无需检查元素中条件为true还是false。 因为您已经在控制器中定义auth
为false或true。 因此,您只能调用ng-show="auth
仅。
只需尝试以下
ng-show="auth"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.