Javascript 角度：登录后在导航栏中显示元素

我是AngularJS的新手，在尝试在导航栏和注销按钮中显示用户信息时遇到了一些问题，但只有在登录后才会出现

1) 我使用ng show仅在登录时显示注销按钮，但此按钮在所有情况下都会出现。

2) 我无法绑定来自我创建的身份验证服务的用户信息。

导航栏指令：

'use strict';

angular.module('clientApp')
  .directive('navbar', function() {
    return {
      restrict: 'E',
      templateUrl: 'views/shared/navbar.html',
      controller: 'NavigationCtrl'
    };
});

'use strict';

angular.module('clientApp')
 .controller('NavigationCtrl', function ($scope, $location, authentication) {
   $scope.isActive = function(path) {
     return path === $location.path();
   };

   $scope.isLoggedIn = function() {
     return authentication.isLoggedIn;
   };

   $scope.userInfo = function() {
     return authentication.getUserInfo.firstname;
   };
});

'use strict';

angular.module('clientApp').factory('authentication', function($http, $q, 
$window, $location, ENV) {
var userInfo;

function init() {
  if ($window.sessionStorage.userInfo) {
    userInfo = JSON.parse($window.sessionStorage.userInfo);
  }
}
init();

function getUserInfo() {
  return userInfo;
}

function isLoggedIn() {
  return ($window.sessionStorage.userInfo) ? true : false;
}

isLoggedIn();

function login(user) {
  var deferred = $q.defer();

  $http.post(ENV.apiEndpoint + 'recruiters/auth', {
    email: user.email,
    password: user.password
  }).then(function(result) {
    userInfo = {
      appToken: result.data['app_token'],
      firstname: result.data['first_name']
    };
    $window.sessionStorage.userInfo = JSON.stringify(userInfo);
    deferred.resolve(userInfo);
    $location.path('/');
    $http.defaults.headers.common['Authorization'] = 'Oauth ' +
    userInfo.appToken;
  }, function(error) {
    deferred.reject(error);
  });

  return deferred.promise;
  }

  return {
    login: login,
    getUserInfo: getUserInfo
  };


});

<div class="header">
<div class="navbar navbar-default" role="navigation">
  <div class="container">
    <div class="navbar-header">

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#js-navbar-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

    <a class="navbar-brand" href="#/">KDZ</a>
  </div>

  <div class="collapse navbar-collapse" id="js-navbar-collapse">

    <ul class="nav navbar-nav">
      <li ng-class="{active:isActive('/')}"><a href="#/">Home</a></li>
      <li ng-class="{active:isActive('/postings')}"><a ng-href="#/postings">Postings</a></li>
      <li ng-class="{active:isActive('/signup')}"><a ng-href="#/signup">Sign Up</a></li>
      <li ng-show="isLoggedIn">Logged as {{userInfo}}</a></li>
      <li ng-show="isLoggedIn"><a ng-href="#/logout"></a>Logout</li>
    </ul>
  </div>
</div>

导航控制器：

'use strict';

angular.module('clientApp')
  .directive('navbar', function() {
    return {
      restrict: 'E',
      templateUrl: 'views/shared/navbar.html',
      controller: 'NavigationCtrl'
    };
});

'use strict';

angular.module('clientApp')
 .controller('NavigationCtrl', function ($scope, $location, authentication) {
   $scope.isActive = function(path) {
     return path === $location.path();
   };

   $scope.isLoggedIn = function() {
     return authentication.isLoggedIn;
   };

   $scope.userInfo = function() {
     return authentication.getUserInfo.firstname;
   };
});

'use strict';

angular.module('clientApp').factory('authentication', function($http, $q, 
$window, $location, ENV) {
var userInfo;

function init() {
  if ($window.sessionStorage.userInfo) {
    userInfo = JSON.parse($window.sessionStorage.userInfo);
  }
}
init();

function getUserInfo() {
  return userInfo;
}

function isLoggedIn() {
  return ($window.sessionStorage.userInfo) ? true : false;
}

isLoggedIn();

function login(user) {
  var deferred = $q.defer();

  $http.post(ENV.apiEndpoint + 'recruiters/auth', {
    email: user.email,
    password: user.password
  }).then(function(result) {
    userInfo = {
      appToken: result.data['app_token'],
      firstname: result.data['first_name']
    };
    $window.sessionStorage.userInfo = JSON.stringify(userInfo);
    deferred.resolve(userInfo);
    $location.path('/');
    $http.defaults.headers.common['Authorization'] = 'Oauth ' +
    userInfo.appToken;
  }, function(error) {
    deferred.reject(error);
  });

  return deferred.promise;
  }

  return {
    login: login,
    getUserInfo: getUserInfo
  };


});

<div class="header">
<div class="navbar navbar-default" role="navigation">
  <div class="container">
    <div class="navbar-header">

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#js-navbar-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

    <a class="navbar-brand" href="#/">KDZ</a>
  </div>

  <div class="collapse navbar-collapse" id="js-navbar-collapse">

    <ul class="nav navbar-nav">
      <li ng-class="{active:isActive('/')}"><a href="#/">Home</a></li>
      <li ng-class="{active:isActive('/postings')}"><a ng-href="#/postings">Postings</a></li>
      <li ng-class="{active:isActive('/signup')}"><a ng-href="#/signup">Sign Up</a></li>
      <li ng-show="isLoggedIn">Logged as {{userInfo}}</a></li>
      <li ng-show="isLoggedIn"><a ng-href="#/logout"></a>Logout</li>
    </ul>
  </div>
</div>

身份验证服务：

'use strict';

angular.module('clientApp')
  .directive('navbar', function() {
    return {
      restrict: 'E',
      templateUrl: 'views/shared/navbar.html',
      controller: 'NavigationCtrl'
    };
});

'use strict';

angular.module('clientApp')
 .controller('NavigationCtrl', function ($scope, $location, authentication) {
   $scope.isActive = function(path) {
     return path === $location.path();
   };

   $scope.isLoggedIn = function() {
     return authentication.isLoggedIn;
   };

   $scope.userInfo = function() {
     return authentication.getUserInfo.firstname;
   };
});

'use strict';

angular.module('clientApp').factory('authentication', function($http, $q, 
$window, $location, ENV) {
var userInfo;

function init() {
  if ($window.sessionStorage.userInfo) {
    userInfo = JSON.parse($window.sessionStorage.userInfo);
  }
}
init();

function getUserInfo() {
  return userInfo;
}

function isLoggedIn() {
  return ($window.sessionStorage.userInfo) ? true : false;
}

isLoggedIn();

function login(user) {
  var deferred = $q.defer();

  $http.post(ENV.apiEndpoint + 'recruiters/auth', {
    email: user.email,
    password: user.password
  }).then(function(result) {
    userInfo = {
      appToken: result.data['app_token'],
      firstname: result.data['first_name']
    };
    $window.sessionStorage.userInfo = JSON.stringify(userInfo);
    deferred.resolve(userInfo);
    $location.path('/');
    $http.defaults.headers.common['Authorization'] = 'Oauth ' +
    userInfo.appToken;
  }, function(error) {
    deferred.reject(error);
  });

  return deferred.promise;
  }

  return {
    login: login,
    getUserInfo: getUserInfo
  };


});

<div class="header">
<div class="navbar navbar-default" role="navigation">
  <div class="container">
    <div class="navbar-header">

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#js-navbar-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

    <a class="navbar-brand" href="#/">KDZ</a>
  </div>

  <div class="collapse navbar-collapse" id="js-navbar-collapse">

    <ul class="nav navbar-nav">
      <li ng-class="{active:isActive('/')}"><a href="#/">Home</a></li>
      <li ng-class="{active:isActive('/postings')}"><a ng-href="#/postings">Postings</a></li>
      <li ng-class="{active:isActive('/signup')}"><a ng-href="#/signup">Sign Up</a></li>
      <li ng-show="isLoggedIn">Logged as {{userInfo}}</a></li>
      <li ng-show="isLoggedIn"><a ng-href="#/logout"></a>Logout</li>
    </ul>
  </div>
</div>

Navabar.html：

'use strict';

angular.module('clientApp')
  .directive('navbar', function() {
    return {
      restrict: 'E',
      templateUrl: 'views/shared/navbar.html',
      controller: 'NavigationCtrl'
    };
});

'use strict';

angular.module('clientApp')
 .controller('NavigationCtrl', function ($scope, $location, authentication) {
   $scope.isActive = function(path) {
     return path === $location.path();
   };

   $scope.isLoggedIn = function() {
     return authentication.isLoggedIn;
   };

   $scope.userInfo = function() {
     return authentication.getUserInfo.firstname;
   };
});

'use strict';

angular.module('clientApp').factory('authentication', function($http, $q, 
$window, $location, ENV) {
var userInfo;

function init() {
  if ($window.sessionStorage.userInfo) {
    userInfo = JSON.parse($window.sessionStorage.userInfo);
  }
}
init();

function getUserInfo() {
  return userInfo;
}

function isLoggedIn() {
  return ($window.sessionStorage.userInfo) ? true : false;
}

isLoggedIn();

function login(user) {
  var deferred = $q.defer();

  $http.post(ENV.apiEndpoint + 'recruiters/auth', {
    email: user.email,
    password: user.password
  }).then(function(result) {
    userInfo = {
      appToken: result.data['app_token'],
      firstname: result.data['first_name']
    };
    $window.sessionStorage.userInfo = JSON.stringify(userInfo);
    deferred.resolve(userInfo);
    $location.path('/');
    $http.defaults.headers.common['Authorization'] = 'Oauth ' +
    userInfo.appToken;
  }, function(error) {
    deferred.reject(error);
  });

  return deferred.promise;
  }

  return {
    login: login,
    getUserInfo: getUserInfo
  };


});

<div class="header">
<div class="navbar navbar-default" role="navigation">
  <div class="container">
    <div class="navbar-header">

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#js-navbar-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

    <a class="navbar-brand" href="#/">KDZ</a>
  </div>

  <div class="collapse navbar-collapse" id="js-navbar-collapse">

    <ul class="nav navbar-nav">
      <li ng-class="{active:isActive('/')}"><a href="#/">Home</a></li>
      <li ng-class="{active:isActive('/postings')}"><a ng-href="#/postings">Postings</a></li>
      <li ng-class="{active:isActive('/signup')}"><a ng-href="#/signup">Sign Up</a></li>
      <li ng-show="isLoggedIn">Logged as {{userInfo}}</a></li>
      <li ng-show="isLoggedIn"><a ng-href="#/logout"></a>Logout</li>
    </ul>
  </div>
</div>

切换导航




记录为{{userInfo}
注销

我认为视图和控制器或服务之间的绑定是错误的，但我不知道如何正确地进行绑定。有人有主意吗？ 谢谢

1）您的

isLoggedIn

是一个函数，函数的计算结果为truthy，因此显示

li

。使用它就像

ng show=“isLoggedIn（）”

一样。对于

return authentication.isLoggedIn中的控制器函数也是如此零件

2） 您的
getUserInfo
也是一个函数，因此请像以下那样使用它：

$scope.userInfo = function() {
    var userInfo = authentication.getUserInfo(); // see the () here
    if (userInfo && userInfo.firstname)
        return userInfo.firstname;

    return 'unknown person';
};

最后但并非最不重要的一点是，您的“身份验证”服务甚至没有“isLoggedIn”功能。将服务的返回值更改为：

return {
    login: login,
    getUserInfo: getUserInfo,
    isLoggedIn: isLoggedIn
};

谢谢你，因为它似乎已经修好了。我做了更改，但是当我还没有登录时会显示“以未知身份登录”。是的，我按照您的建议进行了替换：
以{{userInfo（）}}
的身份登录，但我仍然可以看到它。您还必须从
authentication.isLoggedIn
to
authentication.isLoggedIn（）。请注意，每个摘要中都会对函数进行求值，因此将isLoggedIn分配给变量而不是函数将具有更高的性能。现在可以了，我的名字没有正确返回。谢谢你的帮助！！如果这回答了您的问题，请注明：）很高兴我能帮忙