角度指令：送信ボタンの指示に従ってフォームの検証を聞きます

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 -prefixed directives、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; 
    } 
} 

は、ここで作業フィドルをチェックアウト：あなたが望むならば、あなたもscope.$watchと組み合わせてお使いのディレクティブに継承されたスコープを使用して、上記の模倣ができることをhttps://jsfiddle.net/8m992bet/6/

注意を、双方向バインディングを使用する方が簡単です。

Angular 1.5では=の代わりに<を使用してディレクティブで一方向バインディングを利用できます。