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

我有一個使用畫布的自定義簽名指令。我的腳手架如下：在自定義指令中引用包含字段集

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指令的包含字段集中。我希望能夠引用字段集，以便我知道何時啓用/禁用以適當反映我的元素的樣式。我試過在鏈接函數中引用表格控制器，但是這並不能提供我需要的信息。有沒有更好的方法來解決這個問題？

來源

2015-08-20 BGilman

您是否在指令中添加了'require：'^ form''？並添加你的'linkFunc' –

是的，這正是我想解釋的。根據我的理解，訪問表單控制器不會向我顯示字段集，而且即使這樣做，我也不知道如何確保我的組件位於特定的組件中 – BGilman

我能弄清楚一個解決方案。請讓我知道是否有更清晰的方式去解決它。

我最終創建了一個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 = true）以及newVal ===''（對於disabled ='），所有這些都是有效的值，以將標籤聲明爲disabled 。

然後，在角度爲jqLite的情況下，我控制了我的新創意指令的禁用屬性。

注意：我刪除了我的電子簽名指令替換財產，以便通過它的標籤根據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（用較少，但也就是在薩斯有效）禁用我的canvas元素

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

希望這有助於在未來的人！

來源

2015-08-21 14:46:24 BGilman

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

回答

相關問題