angularjs - 创建像ngDisabled这样的角度指令来检查列表中的角色

Question

如果我的服务中存在某些特定角色，我想创建一个类似 ngDisabled 的属性指令来启用或禁用元素。

angular.module(...)
.service('RolesSerivce', function() {
    this.hasRole = function(roleName) {
         return this.roles.indexOf(roleName)>1;
    };
    this.setRoles = function(rolesArr) {
        this.roles = rolesArr;
    };
    this.setRoles(['ROLE_CAN_CLICK'])
}).direcive('hasRole', function() {
    ??????????????????
    // use RolesSerivce.hasRole inside implemetation
    ??????????????????
});

在我的 HTML 中，我想使用如下指令：

<button has-role="ROLE_CAN_CLICK" ng-disabled="extraValidation > 0">Click me</button>

在上面的示例中，has-role指令必须覆盖ng-disable，它必须是强制性的。但是ng-disable必须在has-roleis时运行true。

我的问题，有人可以帮助我执行指令吗？我怎样才能做到这一点？

有错误的例子

http://codepen.io/betonetotbo/pen/rrazzY

Answer 1

创建一个真值表：

                      (extraValidation > 0)==true  (extraValidation > 0)==false

ROLE_CAN_CLICK==true        DISABLED                     ENABLED

ROLE_CAN_CLICK==false       DISABLED                     DISABLED

创建一个匹配真值表的表达式：

<button ng-disabled="(!ROLE_CAN_CLICK) || (extraValidation > 0)">
     Click me
</button>

Answer 2

尝试这个：

angular.module(...)
.service('RolesService', function() {
    this.hasRole = function(roleName) {
         return this.roles.indexOf(roleName)>1;
    };
    this.setRoles = function(rolesArr) {
        this.roles = rolesArr;
    };
    this.setRoles(['ROLE_CAN_CLICK'])
}).directive('hasRole', function(RolesService) {
    return {
    link: function (scope, element, attrs) {
        $(element).removeAttr('ng-disabled');
        if(RoleService.hasRole(attrs.hasRole)) {
            $(element).removeAttr('disabled');
        } else {
            $(element).attr('disabled', 'disabled');
        }           
    }
    };
});