javascript - 仅在用户第一次在表单输入中键入时运行函数

Question

这应该很简单，但尚未找到解决方案。

我在表单中有一个输入。我想检测用户何时与输入交互，并运行 JavaScript 函数一次(如果有)。

我一直在考虑使用 $watch 来检测 input 元素是否具有类 ng-dirty ，如果有，运行js函数并解绑 watch 。

还有更好的办法吗？如果您能提供一个例子就太好了。

Answer 1

这是一个简单的指令，应该可以满足您的要求。

angular.module('myApp', [])
.controller('MyCtrl', function($scope) {
  $scope.bar = function() {
    console.log('bar was called!');
    $scope.barWasCalled = true;
  };
})
.directive('once', function() {
  return {
    require: 'ngModel',
    scope: {
      fn: '&once'
    },
    link: function($scope, $element, $attrs, ngModel) {
      // add a listener and save the index for removal
      var idx = ngModel.$viewChangeListeners.push(function() {
        // user typed, run the function
        $scope.fn();
        // remove the listener
        ngModel.$viewChangeListeners.splice(idx, 1);
      }) - 1;
    }
  };
})
;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <input type="text" ng-model="foo" once="bar()" placeholder="type something...">
  <div ng-show="barWasCalled">Bar was called!</div>
</div>

$viewChangeListener 提供的性能比 $watch 稍好一点，尽管它只是名义上的。

请记住将任何类型的 DOM 相关行为(例如此行为)放入指令中。这使事情变得轻松而整洁。