angularjs - 如何将自定义输入指令及其父表单重置为 $pristine

Question

我已经实现了一个自定义输入指令 - counter具有复位能力。该指令有 require: "ngModel" .

我正在重置指令 ngModel 的原始状态与 $setPristine() .不像 $setDirty() , $setPristine()不碰$pristine父窗体的状态。

问:我如何“通知”父表单该指令不再“脏”，以便父表单可以拥有它的 $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>

plunker

Answer 1

从 Angular 1.3.x 开始，没有内置的解决方案。
form.$setPristine()在其所有子控件上设置原始。 (link to code)
ngModel.$setPristine()仅在自身上设置 $pristine ( link to code )

解决这个问题的一种方法是创建一个与 form 一起存在的指令。指令和劫持form.$setDirty跟踪脏控件计数。这可能最好在预链接阶段完成(即在子控件开始注册自己之前)。

app.directive("pristinableForm", function() {
  return {
    restrict: "A",
    require: ["pristinableForm", "form"],
    link: function(scope, element, attrs, ctrls) {
      var me = ctrls[0],
        form = ctrls[1];
      me.form = form;
      me.dirtyCounter = 0;
      var formSetDirtyFn = form.$setDirty;
      form.$setDirty = function() {
        me.dirtyCounter++;
        formSetDirtyFn();
      };
    },
    controller: function() {
      this.$notifyPristine = function() {
        if (this.dirtyCounter === 0) return;
        if (this.dirtyCounter === 1) {
          this.dirtyCounter = 0;
          if (this.form) this.form.$setPristine();
        } else {
          this.dirtyCounter--;
        }
      };
    }
  };
});

然后，自定义输入指令需要 require: ["ngModel", "^pristinableForm"]并调用 pristinableForm.$notifyPristine()在其重置功能中:

scope.reset = function(){
  if (ngModel.$dirty){
    scope.counter = original;
    ngModel.$setViewValue(scope.counter);
    ngModel.$setPristine();
    pristinableForm.$notifyPristine();
  }
};

用法是:

<div ng-form="form" pristinable-form>
  <counter ng-model="count1"></counter>
  <counter ng-model="count2"></counter>
  <input ng-model="foo" name="anotherControl">
</div>

plunker