在 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 函数和 return URL。

代码

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

在 AngularJS 中调整导航描述

Adapting navigation derictive in AngularJS

javascript

navigation

login

angularjs