将AngularJS 1.0.x的所有表单字段重置为初始原始状态的最佳方法是什么？
我想知道如果这是可修复的指令或其他简单的解决方法。我喜欢一个解决方案，而不必接触原来的AngularJS源。为了澄清和演示问题，链接到JSFiddle。 http://jsfiddle.net/juurlink/FWGxG/7/
所需功能在路线图 – http://blog.angularjs.org/2012/07/angularjs-10-12-roadmap.html
功能请求 – https://github.com/angular/angular.js/issues/856
建议的解决方案请求 – https://github.com/angular/angular.js/pull/1127
更新了可能的解决方法
足够好的解决方法？
我只是想出了我可以重新编译HTML部分，并把它放回到DOM。它的工作原理，它的罚款暂时解决方案，也作为@blesh在评论中提到：
控制器应该仅用于业务逻辑，而不是用于DOM！
<div id="myform"> <form class="form-horizontal" name="form"> </form> </div>
并在我的控制器中resetForm()：
>保存原始的未更改的HTML
>重新编译保存的原始HTML
>从DOM中删除当前窗体
>将新编译的模板插入DOM
JavaScript：
var pristineFormTemplate = $('#myform').html();
$scope.resetForm = function () {
$('#myform').empty().append($compile(pristineFormTemplate)($scope));
}
我想出了一个解决方案，使用AngularJS没有任何解决方法。这里的诀窍是使用AngularJS能力具有多个同名的指令。
正如其他人提到的，实际上有一个pull请求(https://github.com/angular/angular.js/pull/1127)，使它进入AngularJS 1.1.x分支，允许表单被重置。对这个pull请求的提交改变了ngModel和form / ngForm指令(我想添加一个链接，但Stackoverflow不希望我添加两个以上的链接)。
我们现在可以定义我们自己的ngModel和form / ngForm指令，并使用pull请求中提供的功能扩展它们。
我把这些指令包装在一个名为resettableForm的AngularJS模块中。所有你需要做的是将这个模块包括到你的项目，你的AngularJS版本1.0.x的行为就像是一个Angular 1.1.x版本在这方面。
‘一旦你更新到1.1.x，你甚至不必更新你的代码，只是删除模块，你完成了！
您可以在我创建的jsFiddle(http://jsfiddle.net/jupiter/7jwZR/1/)中的示例中看到模块工作。
步骤1：在项目中包括resettableform模块
(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,ctrls) {
var control = ctrls[0];
control.$setPristine = function() {
this.$dirty=false;
this.$pristine=true;
element.removeClass(DIRTY_CLASS).addClass(PRISTINE_CLASS);
}
},};
});
})(angular);
步骤2：在控制器上提供一个重置模型的方法
请注意，您必须在重置表单时重置模型。在你的控制器，你可以写：
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>
