javascript - 如何在 Angular/Node.js 应用程序中登录后更新 html header ？

Question

我正在尝试在登录后更新标题。我在这项工作中使用了 $on 和 $watch 但没有效果。当我刷新时它工作正常。代码如下。

header.html(为了简单起见，缺少多余的导航条码)

<li><a ng-href="#/login" ng-hide="showMenu">Login</a></li>
<li><a ng-href="#/signup" ng-hide="showMenu">Signup</a></li>
<li><a href="javascript:" ng-click="logout()" ng-show="showMenu">Logout</a></li>

app.js

$stateProvider
  .state('app', {
    url: '',
    views: {
      'header': {
            templateUrl: 'views/partials/_header.html',
            controller: 'HeaderCtrl'
      }
    }
  })

header.js(广播正确触发，如 console.logs 所示)

angular.module('urbinsight')
.controller('HeaderCtrl', function ($scope, $rootScope, $state, $location, UserAuthFactory, AuthFactory) {

$scope.logout = function () {
  UserAuthFactory.logout();
  $rootScope.$broadcast('loginStateChange');
  $location.path('/');
};

$scope.showMenu = AuthFactory.loggedStatus();

$rootScope.$on('loginStateChange', function(){
  console.log($scope.showMenu)
  $scope.showMenu = AuthFactory.loggedStatus(); 
  console.log($scope.showMenu)
  })
})

授权服务

angular.module('urbinsight.services')
.factory('AuthFactory', function ($window) {
var isLogged = false;

return {
  check: function() {
    if ($window.sessionStorage.token && $window.sessionStorage.user) {
      isLogged = true;
    } else {
      isLogged = false;
      delete this.user;
    }
  },
  loggedStatus: function() {
    return isLogged;
  },
  changeLoggedStatus: function() {
    isLogged = !(isLogged);
  }
};
})

登录功能+广播

  login.submit = function () {
  var username = user.username,
    password = user.password;

  if (username !== undefined && password !== undefined) {
    UserAuthFactory.login(username, password).success(function(data) {

      $rootScope.showMenu = true
      // AuthFactory.isLogged = true;
      AuthFactory.changeLoggedStatus();
      AuthFactory.user = data.user.username;
      AuthFactory.userRole = data.user.role;

      $rootScope.$broadcast('loginStateChange');

      $window.sessionStorage.token = data.token;
      $window.sessionStorage.user = data.user.username;
      $window.sessionStorage.userRole = data.user.role;
      $location.path('/');
    }).error(function(status) {
      $window.alert('Oops something went wrong!');
    });
  } else {
    $window.alert('Invalid credentials');
  }
};

请告诉我我做错了什么。

Answer 1

您已在登录 Controller 中设置“$rootScope.showMenu = true”。但在您的 header Controller 中，您还有“$scope.showMenu = AuthFactory.loggedStatus();”

所以我会从你的 header Controller 中删除这一行

$scope.showMenu = AuthFactory.loggedStatus();

因为您希望 header html 直接对 $rootscope showMenu 变量使用react