Question

In this plunk我有一个带有输入字段和按钮的表单。输入字段ng-blur和表单提交调用相同的函数validate()。问题是，当光标在输入字段上并且用户点击＆＃34;提交＆＃34;该功能被触发两次，因为当焦点传递给按钮时会出现模糊。在那种情况下，我需要调用一次函数。

如果您查看console.log，您将看到该功能如何被触发两次。任何想法如何解决这个问题？

HTML

<form name="myForm" ng-submit="validate(2)">
  <input type="text" ng-model="someField" ng-blur="validate(1)" />
  <br/>
  <button type="submit">Submit</button>
</form>

的Javascript

var app = angular.module('example', []);

app.controller('ctl', function ($scope) {

  $scope.validate = function(x) {
    console.log("field validated - " + x);
  };

});

Answer 1

很明显，但你可以随时根据事件类型进行区分，只需传递一个额外的attribute来表示事件的类型

编辑：ng-change代替ng-blur （评论说明）

html

<form name="myForm" ng-submit="validate(2)">
  <input type="text" ng-model="someField" ng-change="validate(1)" />
  <br/>
  <button type="submit">Submit</button>
</form>

js

$scope.validate = function(x) {
  console.log("field validated - " + x);
};

Answer 2

我想解决这个问题。我放了submitted变量来确定是否提交form。因此，在validate函数中，我们首先确定submitted是否为真。但是，重要的一点是，当我们完成API调用时，我们需要将其设为false。像这样：

app.controller('ctl', function ($scope) {
  $scope.submitted = false;
  $scope.validate = function(x) {
    if($scope.submitted === true) {
      return;
    }
    $scope.submitted = true;
    console.log("field validated - " + x);
    // change $scope.submitted back to false in success and error callback of 
    // the API call
  };
});

此解决方案还有另一个好处。它阻止用户提交表单两次（在提交按钮上多次单击？）

我们也可以使用formName.$submitted但是这里有一个函数调用会有它而另一个函数不会。

此处updated plunker

在ng-blur和表单提交时，函数被调用两次

2 个答案: