Question

HeJ小鼠，我正在寻找一种方法来根据用户是否登录来更改导航栏中的导航链接。显然，登录用户应该能够导航到更多页面。

我编写了一个包装ng-token-auth模块（https://github.com/lynndylanhurley/ng-token-auth）的UserService，并添加了一个保存登录状态的布尔变量。该服务看起来类似于：

angular.module('app')
  .run(function($rootScope, $location, userService) {
    $rootScope.$on('auth:login-success', function(ev, user) {
      userService.setLoggedIn(true);
      $location.path('/on/dashboard');
    });
  })  
  .factory('userService', function($auth) {
    var service = {};
    service.loggedIn = false;

    service.submitLogin = submitLogin;
    service.setLoggedIn = setLoggedIn;
    service.getLoggedIn = getLoggedIn;

    return service;

    function submitLogin(params) {
      $auth.submitLogin(params)
    }
    function setLoggedIn(bool) {
      service.loggedIn = bool;
    }
    function getLoggedIn() {
      return service.loggedIn;
    }
  });

我的指示看起来像这样：

.directive('agNavigation', function(userService) {
    if(userService.getLoggedIn()){
      return {
        restrict: 'AE',
        replace: true,
        templateUrl: '/views/userNavigation.html'
      }
    }else{
      return {
        restrict: 'AE',
        replace: true,
        templateUrl: '/views/navigation.html'
      }
    }
  });

登录后，视图将更改为仪表板，但指令不会更新，这是合乎逻辑的，因为不会再次调用该指令。现在，我正在尝试使用$watch函数，但我无法弄明白。见这里：

.directive('agNavigation', function(userService) {
    var navUrl = '';
    if(userService.getLoggedIn()){
      navUrl = '/views/userNavigation.html';
    }else{
      navUrl = '/views/navigation.html';
    }
    return {
      restrict: 'AE',
      replace: true,
      templateUrl: navUrl,
      link: function postLink(scope, element, attrs, controller) {
        scope.$watch(function() {
          return userService.getLoggedIn();
        }), function(newValue, oldValue) {
          if(newValue){
            navUrl = '/views/userNavigation.html';
          }else{
            navUrl = '/views/navigation.html';
          }
        }
      }
    }
  });

我对AngularJS很新，所以我很乐意接受任何建议，或者我是以错误的方式接近这个建议。

Answer 1

在您编写第一个示例代码中的代码时，

userService.getLoggedIn()将在编译时失败。您应该真的需要将该代码移动到templateUrl功能＆amp;根据条件返回URL。

<强>代码

.directive('agNavigation', function(userService) {
      return {
        restrict: 'AE',
        replace: true,
        templateUrl: function(){
           if(userService.getLoggedIn()){
             return '/views/userNavigation.html';
           }
            return '/views/navigation.html';
        }
      }
  });

在AngularJS中调整导航derictive

1 个答案: