我正在使用angular构建一个小型Web应用程序。我正在尝试设置基于角色的导航。好像在页面加载时未调用isAdmin函数,因为我只能看到foo锚标记。
的HTML

<body ng-controller='AccountController'>
    <nav class="navbar navbar-default">
      <ul>
          <li><a href='google.com'>foo</a></li>
          <li ng-if="isAdmin()"><a href='google.com'>bar</a></li>
      </ul>
    </nav>
</body>


AccountController

var app = angular.module('appControllers', []);

app.controller = angular.controller('AccountController', ['$scope',
function($scope, $http) {
    $scope.isAdmin = function() {
        return true; //Just as a test to make sure it works
    }
}]);


理想情况下,这将命中一个将返回管理员状态的Web服务,但现在我想使其正常工作。

感谢您提前提供的所有帮助,

安德烈斯

最佳答案

在您的示例中,您需要删除括号才能使其正常工作。但是我通常使用自定义指令来使其工作。例:

<div class="somediv" show-for-role="ROLE_A,ROLE_B"></div>


而且,如果您的用户具有其中某些角色,则可以对其进行管理。

appModule.directive('manageAccess', ['someState', function (appState) {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var user = someState.currentUser;
      scope.$watch(someState.watchCurrentUser, function(n,o){
         if (n === o){
           return;
         }
        hideShow(element,attrs,n);
      });
      hideShow(element,attrs,user);
    }
  }

var hideShow = function(element,attrs,user){
element.hide();
if (user) {
  var role = attrs.showForRole;
  if (role){
    role.split(',').forEach(function(it){
      if (it == user.role){
        element.show();
      }
    })
  }
}};

关于javascript - AngularJS基于 Angular 色的导航,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26224079/

10-09 18:12