Question

我正在尝试隐藏导航栏，具体取决于用户是否已登录。但是当我更改$scope.loggedIn变量时，导航栏没有隐藏。为什么呢？

查看：

<nav>
  <div ng-controller="mainCtrl">

    <!-- Logged in -->
    <div ng-show="loggedIn">   <!-- this one displays all the time -->
      Navbar logged in
      <a href="#" ng-click="logout()">Log out</a>
    </div>

    <!-- Logged out-->
    <div ng-hide="loggedIn">   <!-- this one never displays -->
      Navbar logged out
      <a href="#" ng-click="login()">Log in</a>
    </div>

  </div>
</nav>

控制器：

.controller('mainCtrl', ['$scope', '$state', 'userService',
   function($scope, $state, userService) {
      $scope.loggedIn = userService.isLoggedIn();

      // been trying this, but it does not work
      $scope.$watch('userService.login()', function(newVal) {
        $scope.loggedIn = newVal;
      });

      $scope.login = function() {
        userService.login();
        $state.go('home');
      };

      $scope.logout = function() {
        userService.logout();
        $state.go('login');
      };
   }
 ]);

服务：

.factory('userService', ['$http', function($http) {
   var loggedIn = false;

   return {
     isLoggedIn: function() {
        return loggedIn;
     }, 
     login: function() {
        loggedIn = true;
     },
     logout: function() {
        loggedIn = false;
     }
  };

}]);

Answer 1

创建控制器时，您将布尔基元绑定到$scope.loggedIn。当您更改服务中的变量时，这不会改变。

您的手表设置方式不正确。可以使用以下代码使其工作：

＆＃13;

var app = angular.module('app', []);
 
app.controller('mainCtrl', ['$scope', 'userService',
   function($scope, userService) {
      $scope.$watch(userService.isLoggedIn, function(newVal) {
        $scope.loggedIn = newVal;
      });
     
      $scope.login = function() {
        userService.login();
      };

      $scope.logout = function() {
        userService.logout();
      };
   }
 ]);

app.factory('userService', ['$http', function($http) {
   var loggedIn = false;

   return {
     isLoggedIn: function() {
        return loggedIn;
     }, 
     login: function() {
        loggedIn = true;
     },
     logout: function() {
        loggedIn = false;
     }
  };

}]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app='app'>
  <div ng-controller="mainCtrl">

    <!-- Logged in -->
    <div ng-show="loggedIn">
      Navbar logged in
      <a href="#" ng-click="logout()">Log out</a>
    </div>

    <!-- Logged out-->
    <div ng-hide="loggedIn">
      Navbar logged out
      <a href="#" ng-click="login()">Log in</a>
    </div>
  </div>
</div>

＆＃13;

您还可以从用户服务中公开包含用户登录状态的用户对象：

＆＃13;

var app = angular.module('app', []);

app.controller('mainCtrl', ['$scope', 'userService',
  function($scope, userService) {
    $scope.user = userService.user;
    
    $scope.login = function() {
      userService.login();
    };
    $scope.logout = function() {
      userService.logout();
    };
  }
]);

app.factory('userService', ['$http',
  function($http) {
    var user = {loggedIn: false};

    return {
      user: user,
      login: function() {
        user.loggedIn = true;
      },
      logout: function() {
        user.loggedIn = false;
      }
    };

  }
]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app='app'>
  <div ng-controller="mainCtrl">

    <!-- Logged in -->
    <div ng-show="user.loggedIn">
      Navbar logged in
      <a href="#" ng-click="logout()">Log out</a>
    </div>

    <!-- Logged out-->
    <div ng-hide="user.loggedIn">
      Navbar logged out
      <a href="#" ng-click="login()">Log in</a>
    </div>
  </div>
</div>

＆＃13;

Answer 2

在从工厂

返回登录方法之后，您应该更改代码以重定向到另一个页面

 $scope.login = function() {
        userService.login().then(function(data){;
        $state.go('home');
       });
      };

导航栏没有隐藏在ng-hide上

2 个答案: