运行仅在用户第一次输入表单时起作用

Question

这应该是直截了当的，但还没有找到解决方案。

我在 form 中有一个 input。我想检测用户何时与输入交互，运行 javascript 函数 once 如果有。

我一直在考虑使用$watch来检测input元素是否有classng-dirty，如果有，运行js功能并解绑手表

有没有更好的方法？如果你能提供一个例子就太好了。

Answer 1

$watch 不是为了那个。如果您从 angular 上下文之外更改某些内容，$watch 真的不会监视。

您可以使用 ng-change 事件与输入交互，或者使用原始 javascript onChange 使用自定义指令并调用 scope.$digest finally

简单的解决方案是使用 ng-change：

<input type="text" name="test" ng-change="doChanges()" />

Answer 2

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

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 相关行为（例如此）放入指令中。这使事情变得轻盈整洁。

Answer 3

您还可以在指令上使用 $watchCollection。 returns 一个注销函数，你可以调用它来解除绑定手表在表单上的绑定。这样做的好处是它会监视表单，而不是模型或任何特定的输入。这样，只要修改了表单上的任何输入，就会执行并删除 $watchCollection 的回调函数。

(function() {
  'use strict';

  angular.module('app', []);

  angular.module('app')
    .directive('mainForm', mainForm);

  mainForm.$inject = ['$log'];

  function mainForm($log) {
    var directive = {
      restrict: "A",
      scope: {
        myForm: "=ngForm"
      },
      link: link
    };

    return directive;

    function link(scope, element, attrs, controller) {
      var undoWatch = scope.$watchCollection('myForm', function(newVal, oldVal) {
        //check if the form is dirty
        if (newVal.$dirty) {
          alert("do this one time!");
          //unbind the function so we don't do it again
          undoWatch();
        }
      });
    }

  }
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="app">
  <h1>Do Action Once Example</h1>
  <div ng-form="example" main-form novalidate>
    <p> Use any input on the page to alert the user one time.</p>
    <input ng-model="inputVal" type="text" class="form-control" />
    <input ng-model="anotherInputVal" type="checkbox" class="form-control" />
  </div>
  <p>{{ inputVal }}</p>
</body>

</html>

运行仅在用户第一次输入表单时起作用

Run function only the first time the user types in form input

javascript

angularjs

angularjs-directive

angular-ngmodel

angularjs-watch

运行 仅在用户第一次输入表单时起作用

Run function only the first time the user types in form input

javascript

angularjs

angularjs-directive

angular-ngmodel

angularjs-watch

运行仅在用户第一次输入表单时起作用