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

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

Эта директива будет иногда быть завернуты в содержащей FIELDSET с использованием директивы 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 (для проверки на disabled = 'disabled' и disabled = true), а также newVal === '' (для disabled = ''), все из которых являются допустимыми значениями для объявления тега как отключенного ,

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

ПРИМЕЧАНИЕ: Я удалил заменить свойство в моей директиве 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), чтобы отключить мой холст элемент

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

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