使用AngularJS刷新Bootstrap导航栏

Question

我目前正在开发一个使用AngularJS和Twitter Bootstrap 3.0进行样式设计的新项目。

该项目还使用了ASP.NET MVC的WebAPI为用户提供基于角色的安全一个RESTful API以及生成承载和刷新使用Owin和OAuth令牌。

其中一个项目的关键方面是，它必须能够通过添加和/或删除取决于分配给单个用户角色/权限菜单选项刷新导航栏菜单。如果用户当前登录到应用程序并且系统管理员决定添加或删除已登录用户的角色，我希望AngularJS自动重新加载导航栏，导航栏将根据用户所具有的角色奇迹般地显示或隐藏选项。

我现在对AngularJS了解不多，想知道这是否可行？我听说$scope.apply()，它可以用于这个，但作为一个没有经验的AngularJS用户，我不知道这可以如何使用。

这是我的观点，即显示菜单栏的一部分，并且你可以看到我使用的功能显示/隐藏菜单选项。如果一旦WebAPI调用生成新的刷新令牌后，它们的值发生更改，我希望这些函数能够再次重新评估。

<li data-ng-if="isAuthenticated()" class="dropdown"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Invoice <b class="caret"></b></a> 
    <ul class="dropdown-menu"> 
     <li><a data-ng-if="isUserInInvoiceRole()" data-ui-sref="addInvoice">Add Invoice</a></li> 
     <li data-ng-if="isUserInInvoiceRole()" class="divider"></li> 
     <li><a data-ng-if="isUserInCreditNoteRole()" data-ui-sref="addCreditNote">Issue Credit Note</a></li> 
     <li data-ng-if="isUserInCreditNoteRole()" class="divider"></li> 
     <li><a data-ui-sref="showDaybook">Daybook</a></li> 
     <li class="divider"></li> 
     <li><a data-ui-sref="showCustomerLedger">Customer Ledger</a></li> 
    </ul> 
</li> 

目前我可以强制导航栏只有这样，才能被刷新是操作的方式从F5刷新页面，这证明基于角色的系统的工作原理，但我想它通过重新加载自动工作导航栏。

控制器

'use strict'; 

appModule.controller('indexController', ['$scope', '$state', 'authService', 
    function ($scope, $state, authService) { 

     $scope.isAuthenticated = function() { 
      return authService.isAuthenticated(); 
     }; 

     $scope.isUserInCreditNoteRole = function() { 
      return authService.isAuthenticated() && authService.isUserInCreditNoteRole(); 
     }; 

     $scope.isUserInInvoiceRole = function() { 
      return authService.isAuthenticated() && authService.isUserInInvoiceRole(); 
     }; 

     $scope.isUserInOrderRole = function() { 
      return authService.isAuthenticated() && authService.isUserInOrderRole(); 
     }; 

     $scope.isUserInAdminRole = function() { 
      return authService.isAuthenticated() && authService.isInAdminRole(); 
     }; 

    }]); 

验证服务

下面是相关的代码的身份验证服务。请记住[roles.xxx]只是常数。

'use strict'; 

appModule.factory('authService', ['$http', 'roles', 
    function ($http, roles) { 

     var authServiceFactory = {}; 

     var authentication = { 
      isAuth: false, 
      roles: "Anon" 
     }; 

     var checkRoles = function (access) { 
      var result = false; 
      for (var a in access) { 
       console.log(access[a]); 
       for (var b in access[a]) { 
        if (authentication.roles.indexOf(access[a][b]) >= 0) { 
         result = true; 
         break; 
        } 
       } 
       if (result) 
        break; 
      } 
      console.log('result ' + result); 
      return result; 
     }; 

     var isUserInInvoiceRole = function() { 
      return checkRoles([roles.invoice]); 
     }; 

     var isUserInOrderRole = function() { 
      return checkRoles([roles.order]); 
     }; 

     var isUserInCreditNoteRole = function() { 
      return checkRoles([roles.creditNote]); 
     }; 

     var isInAdminRole = function() { 
      return checkRoles([roles.admin]); 
     }; 

     var isAuthenticated = function() { 
     return authentication.isAuth; 
    } 

    authServiceFactory.isAuthenticated = isAuthenticated; 
    authServiceFactory.isUserInCreditNoteRole = isUserInCreditNoteRole; 
    authServiceFactory.isUserInInvoiceRole = isUserInInvoiceRole; 
    authServiceFactory.isUserInOrderRole = isUserInOrderRole; 
    authServiceFactory.isInAdminRole = isInAdminRole; 

    return authServiceFactory; 

}]); 

Answer 1

在理解AngularJS如何更新控制器范围之后，我已经设法解决了这个问题。

我只是重新填充的认证服务的authentication对象，一个新的刷新令牌已被检索和导航栏即时更新后。