Ответ 1
Решение без обходного пути
Я придумал решение, которое использует AngularJS без каких-либо обходных решений. Трюк здесь заключается в использовании способности AngularJS иметь более одной директивы с тем же именем.
Как упоминалось ранее, на самом деле существует запрос на pull (https://github.com/angular/angular.js/pull/1127), который превратил его в ветку AngularJS 1.1.x, которая позволяет формам be reset. Конец этого запроса на растяжение изменяет директивы ngModel и form/ngForm (мне бы хотелось добавить ссылку, но Stackoverflow не хочет, чтобы я добавлял больше двух ссылок).
Теперь мы можем определить собственные директивы ngModel и form/ngForm и расширить их с помощью функций, предоставляемых в запросе pull.
Я завернул эти директивы в модуль AngularJS с именем resettableForm. Все, что вам нужно сделать, это включить этот модуль в свой проект, а ваша версия AngularJS версии 1.0.x ведет себя так, как если бы это была версия Angular 1.1.x в этом отношении.
'' После обновления до 1.1.x вам даже не нужно обновлять свой код, просто удалите модуль, и все готово! ''
Этот модуль также передает все тесты, добавленные в ветвь 1.1.x для функции reset.
Вы можете увидеть модуль, работающий в примере в jsFiddle (http://jsfiddle.net/jupiter/7jwZR/1/), который я создал.
Шаг 1: Включите модуль сбрасываемой формы в проект
(function(angular) {
// Copied from AngluarJS
function indexOf(array, obj) {
if (array.indexOf) return array.indexOf(obj);
for ( var i = 0; i < array.length; i++) {
if (obj === array[i]) return i;
}
return -1;
}
// Copied from AngularJS
function arrayRemove(array, value) {
var index = indexOf(array, value);
if (index >=0)
array.splice(index, 1);
return value;
}
// Copied from AngularJS
var PRISTINE_CLASS = 'ng-pristine';
var DIRTY_CLASS = 'ng-dirty';
var formDirectiveFactory = function(isNgForm) {
return function() {
var formDirective = {
restrict: 'E',
require: ['form'],
compile: function() {
return {
pre: function(scope, element, attrs, ctrls) {
var form = ctrls[0];
var $addControl = form.$addControl;
var $removeControl = form.$removeControl;
var controls = [];
form.$addControl = function(control) {
controls.push(control);
$addControl.apply(this, arguments);
}
form.$removeControl = function(control) {
arrayRemove(controls, control);
$removeControl.apply(this, arguments);
}
form.$setPristine = function() {
element.removeClass(DIRTY_CLASS).addClass(PRISTINE_CLASS);
form.$dirty = false;
form.$pristine = true;
angular.forEach(controls, function(control) {
control.$setPristine();
});
}
},
};
},
};
return isNgForm ? angular.extend(angular.copy(formDirective), {restrict: 'EAC'}) : formDirective;
};
}
var ngFormDirective = formDirectiveFactory(true);
var formDirective = formDirectiveFactory();
angular.module('resettableForm', []).
directive('ngForm', ngFormDirective).
directive('form', formDirective).
directive('ngModel', function() {
return {
require: ['ngModel'],
link: function(scope, element, attrs, ctrls) {
var control = ctrls[0];
control.$setPristine = function() {
this.$dirty = false;
this.$pristine = true;
element.removeClass(DIRTY_CLASS).addClass(PRISTINE_CLASS);
}
},
};
});
})(angular);
Шаг 2. Предоставьте метод на вашем контроллере, который сбрасывает модель
Помните, что вы должны reset модель при reset форме. В контроллере вы можете написать:
var myApp = angular.module('myApp', ['resettableForm']);
function MyCtrl($scope) {
$scope.reset = function() {
$scope.form.$setPristine();
$scope.model = '';
};
}
Шаг 3. Включите этот метод в свой HTML-шаблон
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<form name="form">
<input name="requiredField" ng-model="model.requiredField" required/> (Required, but no other validators)
<p ng-show="form.requiredField.$errror.required">Field is required</p>
<button ng-click="reset()">Reset form</button>
</form>
<p>Pristine: {{form.$pristine}}</p>
</div>
</dvi>