Как сбросить директиву пользовательского ввода и его родительскую форму до $ pristine

Question

Я внедрил настраиваемую директиву ввода - 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> 

plunker

Answer 1

На угловых 1.3.x, нет встроенного в растворе.

form.$setPristine() комплекты нетронутые на всех его дочерних элементах управления. (link to code)

ngModel.$setPristine() только устанавливает $ нетронутым на себя (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

Answer 2

Это не так хорошее решение. Итерации через элементы управления, прикрепленные к форме, и проверьте, есть ли еще грязный.

Я использовал метод объяснения here, чтобы получить элементы управления.

Plunker

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(); 


     }; 
    } 
    }; 
});