在 AngularJS 中调整导航指令

Question

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

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

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 函数并根据条件返回 URL。

代码

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