angularjs

Question

我有一个带有提交按钮的表单，效果很好。但是，我需要从位于页面右上角表单外部的清除按钮中清除表单数据。清除按钮存在于父控制器中，位于右上角的表单上方。从清除按钮发送的表单总是未定义，这是因为清除按钮不是表单的一部分。

如何将同一个表单实例传递给清除？如何清除数据？如果这是设计问题，我仍然需要解决方法。

这是我为模仿它而创建的 fiddle。任何帮助将不胜感激。

<div ng-app>

<div class="col-md-10">
  <h2>Todo</h2></div>
<div class="col-md-2">
  <button class="btn pull-right" ng-click="clear(TodoForm)"> Close</button>

</div>
<br>
<div ng-controller="TodoCtrl">

  <form name="TodoForm" ng-submit="addTodo()" name="testForm">
    <input type="text" ng-model="todoText" size="30" placeholder="add new todo here">
    <input class="btn-primary" type="submit" value="add">

  </form>

</div>

function MainCtrl($scope) { 

$scope.clear = function(form) {
    alert(form); // the form is undefined
    if (form.$dirty)
      form.setPristine(); // clean this form
    else
      alert("form not dirty");
  };
};

function TodoCtrl($scope) {

  $scope.todoText = "test";
  $scope.addTodo = function() {
    alert("Submitted");
    $scope.todoText = "";
    // submit logic works fine
  };
}

Answer 1

您应该使用 $broadcast 在控制器之间进行通信，而不是尝试访问范围之外的表单。

这是fiddle和下面的解释

$broadcast函数用于向所有child$scope广播事件。任何感兴趣的 child $scope 都可以使用 $on 函数注册以监听该事件。此功能用于控制器之间的通信。

在您的情况下，我们通过从 $rootScope 广播一个名为 clearForm 的事件来发出清除表单的信号。侦听事件 clearForm 的 TodoCtrl $scope 将收到清除表单字段的信号。

app.controller("MainCtrl", function($scope, $rootScope) {
  $scope.clear = function(form) {
    $rootScope.$broadcast("clearForm");
  };
});

app.controller("TodoCtrl", function($scope) {  
  $scope.$on("clearForm", function() {
    if ($scope.testForm.$dirty) {
      $scope.testForm.$setPristine();
      $scope.todoText = "";
    } else {
      alert("form not dirty");
    }   
  });
});

AngularJS 1.1.x +

$scope.form.$setPristine() 仅适用于 AngularJS 版本 1。1.x.

$setPristine()只会将表单状态设置为pristine，不会清除表单域。您需要通过取消将反映在屏幕上的 $scope 变量来手动清除它。

if ($scope.testForm.$dirty) {
  $scope.testForm.$setPristine();
  $scope.todoText = "";
}

AngularJS1.0.x+

$setPristine 功能在 1.0.x 版本中不可用。

你问题中的例子Fiddle似乎配置为1.0.x

在 1.0.x 中，您只需清除 $scope 变量

  $scope.$on("clearForm", function() {
      $scope.todoText = "";
  });

angularjs - 如何从位于表单外部的清除按钮清除表单数据

angularjs -how to clear the form data from a clear button outside sitting outside the form

forms

reset

form-data

AngularJS 1.1.x +

AngularJS1.0.x+