Ссылка, содержащая набор полей в пользовательской директиве

Question

Ссылка, содержащая набор полей в пользовательской директиве

0

У меня есть специальная директива подписи с использованием холста. Мои леса ниже:

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'

но это не дает мне необходимой информации. Есть ли лучший способ сделать это?

BGilman 20 авг. 2015, в 22:44

Источник

0

Вы добавили require: '^form' в директиве? и добавьте свою linkFunc
Pankaj Parkar 20 авг. 2015, в 20:11
0

Да, это то, что я пытался объяснить. Насколько я понимаю, доступ к контроллеру формы не показывает мне наборы полей, более того, даже если бы он это сделал, я не знаю, как бы я был уверен, что мой компонент находится в пределах определенного
BGilman 21 авг. 2015, в 13:46

Теги:

javascript

angularjs

angularjs-directive

fieldset

1 ответ

Ещё вопросы

Вы добавили require: '^form' в директиве? и добавьте свою linkFunc
Да, это то, что я пытался объяснить. Насколько я понимаю, доступ к контроллеру формы не показывает мне наборы полей, более того, даже если бы он это сделал, я не знаю, как бы я был уверен, что мой компонент находится в пределах определенного

BGilman · Accepted Answer · 2015-08-21T12-24-00.000Z

Я смог найти решение. Пожалуйста, дайте мне знать, если есть более чистый способ.

Я закончил создание директивы 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 === '');
    });
}

В этой директиве я наблюдаю его атрибут "disabled". Я проверяю оба параметра: newVal (для проверки на disabled = 'disabled' и disabled = true), а также newVal === '' (для disabled = ''), все из которых являются допустимыми значениями для объявления тега как отключенного,

Затем, с угловым jqLite, я управляю отключенным атрибутом моей новой креативной директивы.

ПРИМЕЧАНИЕ. Я удалил свойство replace в моей директиве eSignature, чтобы ссылаться на него с помощью этого тега, поскольку в соответствии с документами jqLite его поиск "ограничен поиском по имени тега".

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

Надеюсь, это поможет любому в будущем!