使用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對象，一個新的刷新令牌已被檢索和導航欄即時更新後。