Angular Directive：使提交按鈕指令聽取表單驗證

Question

我在我的項目中有一堆表單，並且它們都有一組特定的驗證表達式。最重要的是，我還附加了一個加載元素，因此在整個項目中重複使用該按鈕非常困難。考慮到這一點，我想我可以使用指令來代替。問題是，當我通過屬性傳遞我的表達式時，它不會更新/驗證用戶輸入數據。基本上它只是像屬性一樣，而不是表達式。

概括地說什麼，我一直想做到的，是這樣的：

<submit-button label="My Label" validate="!myForm.$valid"></submit-button> 

將返回類似的東西：

<button ng-disabled="!myForm.$valid">My Label</button> 

這裏是對的jsfiddle基本隔離模板是什麼我到目前爲止：https://jsfiddle.net/lucasbittar/8m992bet/3/

非常感謝！

Answer 1

在該版本的Angular中實現此功能的最簡單方法是在您的指令中使用雙向屬性綁定。將validate屬性/作用域屬性綁定到您的表達式，並在ngDisabled指令中引用該屬性。

重要的是要注意的是ngDisabled（和其他ng前綴指令，IIRC）直接對錶達式操作，所以不應該使用雙括號來插入它們。

指令代碼變爲：

function submitButton() { 
    var submit = { 
    restrict: 'E', 
    require: ['^form'], 
    template: '<button ng-disabled="validate">{{ label }}</button>', 
    scope: { 
     validate: '=' 
    }, 
    link: link 
    } 
    return submit; 

    function link (scope, el, attr, formCtrl) { 
    scope.label = attr.label; 
    } 
} 

退房工作小提琴這裏：https://jsfiddle.net/8m992bet/6/

請注意，如果你願意，你也可以模仿上述使用您的指令繼承的範圍與scope.$watch相結合，但使用雙向綁定更容易。

另請注意，在Angular 1.5中，您可以使用<而不是=對指令使用單向綁定。