注意，这里传入的不是角色，而是权限。因为用户角色是可以动态扩展的，如果这里写的是什么样的角色才可以访问这个元素，那以后每新增一个角色都将是一个很大很大的麻烦，因为你得一个个来修改代码。下面是自定义指令zg-access的代码：
/** * 元素级别的访问控制指令 */ App.directive("zgAccess", function($sessionStorage, $http){ var roles = []; // 角色 var elemPermissions = {}; // 角色元素权限映射表，如{ "role":{"SEARCH"}}，role有这个搜索权限 // 后台获取 (function(){ // 简便起见，这里直接生成 roles = ["admin", "user", "visitor"]; elemPermission = { "admin":["*"], "user":["SEARCH"], "visitor":[] } })(); console.log("zg-access"); return { restrict: 'A', compile: function(element, attr) { // 初始为不可见状态none，还有 禁用disbaled和可用ok，共三种状态 var level = "none"; console.log(attr) if(attr && attr["zgAccessLevel"]) { level = attr["zgAccessLevel"]; } switch(level) { case "none": element.hide(); break; case "disabled": element.attr("disabled", ""); break; } // 获取元素权限 var access = attr["zgAccess"]; // 将此权限上传到后端的数据库 (function(){ //upload })(); return function(scope, element) { // 判断用户有无权限 var user = $sessionStorage.USER; if(user==null||angular.equals({}, user)) { user = {}; user.role = "visitor"; } var role = user.role.toLowerCase(); console.log(roles); for(var i in roles) { var tmp = roles[i].toLowerCase(); if(role == tmp) { tmp = elemPermission[role]; console.log(tmp) for(var j in tmp){ console.log(tmp[j]+" "+access); if(access.toLowerCase() == tmp[j].toLowerCase()) { element.removeAttr("disabled"); element.show(); } } } } }; } } })
zgAccessLevel是一个属性，用来控制级别，如果是none（默认为none），就不显示元素；如果是disbaled，就是元素不可用（如Button不可用）。
下面是元素示例：
<button ng-click="" zg-access="SEARCH" zg-access-level="disabled">Search</button>
此时，若以admin角色或者user角色登录，Search按钮将不可用。