在单个元素上具有新/隔离范围的两个属性指令

Question

我想使用 AngularJS 指令根据用户是否具有特定角色（作为属性值给出；每个元素可能不同）来禁用整个应用程序中表单的特定部分。该指令的代码如下：

/** @ngInject */
function PermissionDirective() {
    var directive = {
        restrict: 'A',
        scope: true,
        bindToController: true,
        controller: controller,
        controllerAs: 'permission',
        link: link
    };

    function link(scope, element, attrs) {
        scope.soPermission = attrs.soPermission;
    }

    return directive;
}

/** @ngInject */
function controller($scope, $attrs, ...) {
    var permission = this;
    permission.granted = false;
    $scope.soPermission = $attrs.soPermission;
    init();

    function init() {
        var requiredPermission = $scope.soPermission;

        permission.granted = // determine if user can use element
    }
}

请注意，它需要自己的作用域才能工作。 HTML中的用法是：

<button type="button" ng-disabled="... || !permission.granted" so-permission="WRITE">

只要so-permission 是元素中具有新范围的唯一指令，一切都很好。然而，一些元素也使用confirm 模态，这似乎也需要一个新的/隔离的范围。这会导致 Multiple directives... Angular 错误。

我的问题是：您如何解决这个问题？如何重新编写 so-permission 指令以摆脱内部作用域并使其继续工作（因为我无法触及 confirm 东西，因为它是一个库）？

Answer 1

您打算赋予表单元素哪些不同的权限？也许退后一步，从更简单的 HTML 角度看待它是可能的？

您是否可以简单地使用带有函数的 ng-attr-readonly 分配 readonly 属性，而不是创建指令，以确定它是否应该存在。该函数可能存在于表单的控制器中。

<input type="text" ng-attr-readonly="getPermissions()" />

以及功能：

this.getPermissions = function() {
  if (this.granted === 'READ') return undefined;
  return 'readonly';
}

这种方法适合你的情况吗？

更新：将此函数变成工厂并重新使用它。

angular.module("myApp").factory("PermissionsFactory",PermissionsFactory);
function PermissionsFactory() {

  factory = {
    getPermissions: getPermissions
  }
  return factory;

  function getPermissions(ctrl) {
    if (ctrl.granted === 'READ') return undefined;
    return 'readonly';
  } 

}

然后，在你的控制器中（假设你已经注入它）：

this.getPermissions = PermissionsFactory.getPermissions

最后，在你的 HTML 中，确保将控制器传递给函数，因为函数不再是控制器的一部分，需要控制器的范围来检查权限：

<input type="text" ng-attr-readonly="getPermissions(permission)" />

Answer 2

在 Angular js 中，我们最多可以在单个元素上使用一个独立的指令。我建议尝试装饰你的指令。查看这篇文章了解更多详情 Decorating Directives

Answer 3

您应该使用 $parse 服务与范围进行通信： /

** @ngInject */
        function PermissionDirective() {
        var directive = {
        restrict: 'A',
        link: link
    };

function link(scope, element, attrs) {
    var getter = $parse(attrs.soPermission);
    var setter = getter.setter;
    setter(scope, val); // set value to scope
    var value = getter(scope); //get value from scope
}

return directive;
}

您也可以使用 scope.$watch 来动态同步值。