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

authService

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

您已设置＆＃34; $ rootScope.showMenu = true＆＃34;在您的登录控制器中。但是在你的标题控制器中，你还有＆＃34; $ scope.showMenu = AuthFactory.loggedStatus（）;＆＃34;

所以我会从你的标题控制器中删除这一行

$scope.showMenu = AuthFactory.loggedStatus();

由于您希望标题html直接对$ rootscope showMenu变量做出反应

如何在angular / node.js应用程序中登录后更新html标头？

1 个答案: