Question

我正在使用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服务，但是现在我想让它工作。

提前感谢所有帮助，

安德烈

Answer 1

在您的示例中，您需要删除大括号才能使其正常工作。但我通常使用自定义指令使其工作。例如：

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

Answer 2

尝试删除多余的＆＃39;（）＆＃39;在＆＃39; isAdmin＆＃39;之后那样：

function($scope, $http) {
    $scope.isAdmin = function() {
        return true; //Just as a test to make sure it works
    }
}

希望它有所帮助...

AngularJS基于角色的导航

2 个答案: