angularjs - 将表单重置为原始状态(AngularJS 1.0.x)

Question

AngularJS 1.1.x 的路线图上包含将表单字段重置为原始状态(重置脏状态)的功能。不幸的是，当前的稳定版本缺少这样的功能。

对于 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:

Controller 应该仅用于业务逻辑，而不是用于 DOM!

<div id="myform">
  <form class="form-horizontal" name="form">
  </form>
</div>

在我的 Controller 中的 resetForm() 上:

• 保存原始未更改的 HTML
• 重新编译保存的原始 HTML
• 从 DOM 中删除当前表单
• 将新编译的模板插入 DOM

JavaScript:

var pristineFormTemplate = $('#myform').html();
$scope.resetForm = function () {
    $('#myform').empty().append($compile(pristineFormTemplate)($scope));
}

Answer 1

我认为值得一提的是，在 Angular 的更高版本(例如 1.1.5)中，您可以在表单上调用 $setPristine。

$scope.formName.$setPristine(true)

这也会将所有表单控件设置为原始状态。

FormController.$setPristine