通常の入力を使用して、など

<form name="myForm"> 
    <input type="text" ng-model="foobar"> 
</form>

入力ボックスに入力した後myForm.$dirtyはtrueです。

私は使用例が

<form name="myForm"> 
    <my-directive foo-bar="myObj.foobarValue"></my-directive> 
</form>

と2つのボタンのいずれかをユーザーがクリックした後

は、 myForm$dirtyがtrueに設定されているだろうな

angular.module('myModule', []) 
.directive('myDirective', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     fooBar: '=' 
    }, 
    template: '<div><button ng-click="fooBar=foo"></button><button ng-click="fooBar=bar"></button></div>' 
    }; 
});

ような単純なディレクティブを作成したいと思います。

これはどのように達成されましたか？インスタンス化および使用すること

<form name="myForm"> 
    <input type="text" ng-model="foobar"> 
    <my-directive ng-model="foobar"></my-directive> 
</form>

：

angular.module('myModule', []) 
.directive('myDirective', function() { 
    return { 
    restrict: 'E', 
    require: { ngModelCtrl: 'ngModel' }, 
    scope: { 
     ngModel: '<' 
    }, 
    bindToController: true, 
    controllerAs: '$ctrl', 
    template: 
     `<div> 
      <button ng-click="$ctrl.ngModelCtrl.$setViewValue('foo')"> 
       Set foo 
      </button> 
      <button ng-click="$ctrl.ngModelCtrl.$setViewValue('bar')"> 
       Set bar 
      </button> 
     </div>`, 
    controller: function ctrl() {} 
    }; 
});

使用：

出典

2017-07-02 clearpath

を参照してください、それは受け入れられるだろうか？ – user2718281

[ngFormController API - $ setDirty]（https://docs.angularjs.org/api/ng/type/form.FormController#$setDirty）を使用します。 – georgeawg

実装カスタムフォームコントロール

使用ngModel controllerとDDOにrequire propertyのオブジェクト形式（ngModelを使用して） ng-model controllerの場合、ディレクティブは必要に応じてフォームコントロールを自動的に設定します。

The DEMO

angular.module('myModule', []) 
 
.directive('myDirective', function() { 
 
    return { 
 
    restrict: 'E', 
 
    require: { ngModelCtrl: 'ngModel' }, 
 
    scope: { 
 
     ngModel: '<' 
 
    }, 
 
    bindToController: true, 
 
    controllerAs: '$ctrl', 
 
    template: 
 
     `<div> 
 
      <button ng-click="$ctrl.ngModelCtrl.$setViewValue('foo')"> 
 
       Set foo 
 
      </button> 
 
      <button ng-click="$ctrl.ngModelCtrl.$setViewValue('bar')"> 
 
       Set bar 
 
      </button> 
 
     </div>`, 
 
    controller: function ctrl() {} 
 
    }; 
 
});

<script src="//unpkg.com/angular/angular.js"></script> 
 
    <body ng-app="myModule"> 
 
    <h2>ngModel DEMO</h2> 
 
    <form name="myForm"> 
 
     <input type="text" ng-model="foobar"> 
 
     <my-directive ng-model="foobar"></my-directive> 
 
    </form> 
 
    <br>myForm.$dirty = {{myForm.$dirty}} 
 
    <br>myForm.$pristine = {{myForm.$pristine}} 
 
    <br><button ng-click="myForm.$setDirty()">Set dirty</button> 
 
    <br><button ng-click="myForm.$setPristine()">Set pristine</button> 
 
    </body>

更新

これは有望に見えます。 scope: { ngModel: '<' }のように見えますが、必要ありませんか？この例で

、ng-model入力が使用されていないが、より複雑な形状制御コンポーネントのため、私は、入力としてngModelと範囲を隔離をお勧めします。出力は$setViewValue methodで行う必要があります。詳細については

、ディレクティブはむしろ、テンプレート内の任意のボタンよりも、ボタンごとに行動するように定義された場合、それは容易になるだろう

出典

2017-07-03 05:02:48 georgeawg

私はディレクティブを構築しており、コードの繰り返しを避けることを望んでいました。 – clearpath

回答の更新を参照してください。 – georgeawg

これは有望そうです。それはスコープのように見えます：{ngModel： '<'}、 ''は必要ありませんか？ – clearpath

角度カスタムフォーム・コンポーネント/ディレクティブと$汚い財産

答えて

実装カスタムフォームコントロール

The DEMO

更新

角度カスタムフォーム・コンポーネント/ディレクティブと$汚い財産

答えて

実装カスタムフォームコントロール

The DEMO

更新

関連する問題