angularjs – 根据用户的角色在单个视图中显示不同的内容

http://jsfiddle.net/BmQuY/3/

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

app.service('authService',function(){

  var user = {};
  user.role = 'guest';
  return{
    getUser: function(){
      return user;
    },generateRoleData: function(){
      /* this is resolved before the 
         router loads the view and model.
         It needs to return a promise. */
      /* ... */
    }
  }
});

app.directive('restrict',function(authService){
    return{
        restrict: 'A',priority: 100000,scope: false,compile:  function(element,attr,linker){
            var accessDenied = true;
            var user = authService.getUser();

            var attributes = attr.access.split(" ");
            for(var i in attributes){
                if(user.role == attributes[i]){
                    accessDenied = false;
                }
            }


            if(accessDenied){
                element.children().remove();
                element.remove();           
            }


            return function linkFn() {
                /* Optional */
            }
        }
    }
});

如果要使用IE 7或8的此指令，则需要手动删除元素的子节点，否则将抛出错误：

angular.forEach(element.children(),function(elm){
    try{
      elm.remove();
    }
    catch(ignore){}
  });

可能使用的示例：

<div data-restrict access='superuser admin moderator'><a href='#'>Administrative options</a></div>

使用Karma Jasmine进行单元测试：
注意：完成的回调函数仅适用于Jasmine 2.0，如果使用1.3，则应使用waitsFor。

describe('restrict-remove',function(){
    var scope,compile,html,elem,authService,timeout;
    html = '<span data-restrict data-access="admin recruiter scouter"></span>';
    beforeEach(function(){
      module('myApp.directives');
      module('myApp.services');
      inject(function($compile,$rootScope,$injector){
        authService = $injector.get('authService');
        authService.setRole('guest');
        scope = $rootScope.$new();
        // compile = $compile;
        timeout = $injector.get('$timeout');
        elem = $compile(html)(scope);
        elem.scope().$apply();
      });
    });
    it('should allow basic role-based content discretion',function(done){
        timeout(function(){
          expect(elem).toBeUndefined(); 
          done(); //might need a longer timeout;
        },0);
    });
  });
  describe('restrict-keep',timeout;
    html = '<span data-restrict data-access="admin recruiter">';
    beforeEach(function(){
      module('myApp.directives');
      module('myApp.services');
      inject(function($compile,$injector){
        authService = $injector.get('authService');
        timeout = $injector.get('$timeout');
        authService.setRole('admin');
        scope = $rootScope.$new();
        elem = $compile(html)(scope);
        elem.scope().$apply();
      });
    });

    it('should allow users with sufficient priviledsges to view role-restricted content',function(done){
      timeout(function(){
        expect(elem).toBeDefined();
        expect(elem.length).toEqual(1);
        done(); //might need a longer timeout;
      },0)
    })
  });

对于元素的通用访问控制指令，不使用ng-if(仅自V1.2起 – 当前不稳定))或ng-show(实际上并不从DOM移除元素)。