Angular : 登录后在导航栏中显示元素

Question

我是 AngularJS 的新手，尝试在我的导航栏和“注销”按钮中显示 userInfo 时遇到问题，但仅在我登录后才出现。

1)

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

2)

我无法绑定来自我创建的身份验证服务的 userInfo。

导航栏指令:

'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
  };


});

Navabar.html:

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

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

Answer 1

1) 您的 isLoggedIn 是一个函数，并且函数的计算结果为真，因此显示 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';
};

最后但同样重要的是，您的 'authentication' 服务甚至没有 'isLoggedIn' 功能。将服务的 return 值更改为：

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

Angular : 登录后在导航栏中显示元素

Angular : displaying elements in navbar after logged in

javascript

binding

navbar

angularjs

ng-show

1)

2)