5

counterリセット機能を備えたカスタム入力ディレクティブを実装しました。ディレクティブにはrequire: "ngModel".

でディレクティブの元の状態をリセットしngModelてい$setPristine()ます。とは異なり$setDirty()、親フォーム$setPristine()の状態には触れません。$pristine

Q:$pristine親フォームの状態をリセットできるように、このディレクティブがもはや「ダーティ」ではないことを親フォームに「通知」するにはどうすればよいですか?

form.$setPristine()私のディレクティブが知らない（そしてすべきではない）フォームに他の「汚い」コントロールがあるかもしれないので、呼び出すだけでは十分ではないことに注意してください。

これはディレクティブのリンク機能です:

link: function(scope, element, attrs, ngModel){

  var original;

  ngModel.$render = function(){
    original = scope.counter = ngModel.$viewValue;
  };

  scope.up = function(){
    ngModel.$setViewValue(++scope.counter);
  };

  scope.reset = function(){
    scope.counter = original;
    ngModel.$setViewValue(scope.counter);
    ngModel.$setPristine(); // this sets $pristine on the directive, but not the form
  };
}

そして、これがどのように使用されるかです：

<div ng-form="form">
  <counter ng-model="count"></counter>
</div>

プランカー

4

2 に答える 2

0

これはあまり良い解決策ではありません。フォームにアタッチされたコントロールを反復処理し、まだ汚れたコントロールがあるかどうかを確認します。

ここで説明するメソッドを使用して、コントロールを取得しました。

プランカー

app.directive("counter", function(){
  return {
    require: "ngModel",
    template: '<button ng-click="up()">{{counter}}</button><button ng-click="reset()">reset</button>',
    link: function(scope, element, attrs, ngModel){

      var original;

      ngModel.$render = function(){
        original = scope.counter = ngModel.$modelValue;
      };

      scope.up = function(){
        ngModel.$setViewValue(++scope.counter);
      };

      scope.reset = function(){
        scope.counter = original;
        ngModel.$setViewValue(scope.counter);
        ngModel.$setPristine();

        // check if one of the controls attached to the form is still dirty
        var dirty = false;
        angular.forEach(scope.form, function(val, key) {
            if (key[0] != '$') {
              if (val.$dirty) {
                dirty = true; 
              }
            }
        });
        if(!dirty) scope.form.$setPristine();


      };
    }
  };
});
于 2015-01-30T20:28:02.067 に答える