在自定义指令中引用包含字段集

Question

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

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 指令将此指令包装在包含字段集中。我希望能够引用字段集，以便我知道它何时 enabled/disabled 以适当地反映我的元素的样式。我尝试在 link 函数中使用

引用表单控制器

require: '^form'

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

Answer 1

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

我最终创建了一个字段集指令。

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 === '');
    });
}

在这个指令中，我观察到它的 "disabled" 属性。我检查了 !!newVal（针对 disabled='disabled' 和 disabled=true 进行验证）以及 newVal === ''（对于 disabled=''），所有这些都是声明标签的有效值已禁用。

然后，通过 angular 的 jqLite，我控制了我的新创意指令的禁用属性。

注意：我在我的 eSignature 指令中删除了替换属性，以便通过它的标签引用它，因为根据 jqLite 的文档，它的查找是"limited to lookups by tag name."

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;
   }
}

希望这对以后的任何人都有帮助！

在自定义指令中引用包含字段集

Referencing containing fieldset in custom directive

javascript

fieldset

angularjs

angularjs-directive