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

我有一个带有提交按钮的表单，可以很好地工作。但是，我需要从页面右上角表单外部的“清除”按钮中清除表单数据。“清除”按钮存在于父控制器中，位于右上角标题的窗体上方。从“清除”按钮发送的表单始终显示为未定义，这是因为“清除”按钮不是表单的一部分

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

这是我为模仿这一点而创作的小提琴。任何帮助都将不胜感激

---

您应该使用

$broadcast

在控制器之间进行通信，而不是试图访问超出范围的表单

下面是答案和解释

$broadcast

函数用于将事件广播到所有子

$scope

。任何感兴趣的子

$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 = "";
}

AngularJS 1.0.x+

$setPristine

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

您问题中的示例似乎配置为1.0.x

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

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

---

也可以从

$scope

广播，因为其他控制器是儿童。我可以使用表单清除所有字段，而不使用$setPristine吗

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");
    }   
  });
});

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

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