Question

我有一个使用画布的自定义签名指令。我的脚手架如下：

angular
    .module('app.orders')
    .directive('eSignature', eSignature);

function eSignature() {
   var directive = {
     restrict: 'EA',
     templateUrl: 'app/orders/signature/signature.directive.html',
     replace: true,
     scope: {
       ngModel: '='
     },
     link: linkFunc,
     controller: SignatureController,
     controllerAs: 'vm',
     bindToController: true
   };

   return directive;
}

此指令有时会使用ngDisabled指令包装在包含字段集中。我希望能够引用该字段集，以便我知道何时启用/禁用它以适当地反映我的元素的样式。我尝试使用

在链接函数中引用表单控制器

require: '^form'

但是这并没有给我提供我需要的信息。有没有更好的方法来解决这个问题？

Answer 1

我能够找到解决方案。如果有更清洁的方法，请告诉我。

我最终创建了一个fieldset指令。

angular
    .module('app.orders')
    .directive('fieldset', fieldset);

function fieldset() {
    var directive = {
        restrict: 'E',
        link: linkFunc
    };

    return directive;
}

function linkFunc(scope, element, attrs) {
    attrs.$observe('disabled', function (newVal) {
        element.find('e-signature').attr('disabled', !!newVal || newVal === '');
    });
}

在这个指令中，我观察它是“禁用”属性。我检查了两个!! newVal（以验证禁用='禁用'和禁用= true）以及newVal ===''（对于disabled =''），所有这些都是有效值以将标记声明为禁用

然后，使用angular jqLite，我控制新创意指令的disabled属性。

注意：我删除了eSignature指令中的替换属性，以便通过它的标记引用它，因为根据jqLite的文档，其 find “仅限于查找标签名称。“

function eSignature() {
  var directive = {
    restrict: 'EA',
    templateUrl: 'app/orders/signature/signature.directive.html',
    scope: {
      ngModel: '='
    },
    controller: SignatureController,
    controllerAs: 'vm',
    bindToController: true
  };

  return directive;
}

最后，我使用css（用Less编写，但在Sass中也有效）来禁用我的canvas元素

e-signature:disabled, e-signature[disabled="disabled"] {
   canvas, div[pw-canvas] {
     pointer-events: none;
     cursor: not-allowed;
   }
   canvas {
     opacity: 0.55;
   }
}

希望这对未来的任何人都有帮助！

在自定义指令

1 个答案: