AngularJS ng-show和ng-hide不起作用

时间:2015-04-22 11:00:49

标签: javascript 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;    
                  });
  }]).

这2个注销和登录链接基本上都在我的主页面中。我不想创建很多页面,因此我想互相隐藏。当用户单击登录链接时,它将运行angularjs路由器,在这种情况下/ login,表单中还有另一个templateURL,它将直接附加到主页面。一旦用户输入了userID和密码,用户就需要点击提交按钮,这就是代码

<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()

3 个答案:

答案 0 :(得分:1)

您的等于比较不正确。

这是为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>

答案 1 :(得分:1)

实际上你需要两个工作来完成这个任务

第一项工作: -

您需要在auth而不是$rootScope中分配$scope varibale。 因为此对象在两个控制器中使用。

喜欢

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"。你曾经使用过单身。 double triple 相等

OR

如果您在$ rootScope中分配了对象,那么您不需要在元素中检查条件是true还是false。因为您已在控制器中定义auth为false或true。所以你只能打电话给ng-show="auth

答案 2 :(得分:0)

试试以下

ng-show="auth"

如果它仍无法正常工作,请告诉我。