在AngularJS中调整导航的价格

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

我编写了一个包含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，因此我为任何意见非常高兴，或者如果我在一个错误的方式接近这一点。

来源

2015-08-09 rassi

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

来源

2015-08-09 10:36:06

谢谢你，这是有道理的，但它不会改变的事实，该指令被加载和/views/navigation.html被渲染，然后登录后的指令不对userService.getLoggedIn（）的改变做出反应 – rassi

在AngularJS中调整导航的价格

回答

相关问题