0

这应该是直截了当的，但尚未找到解决方案。

我有input一个form. 我想检测用户何时与输入交互并运行一次 javascript 函数（如果有）。

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

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

4

3 回答 3

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只提供比 a 更好的性能$watch，尽管它是名义上的。

请记住将诸如此类的任何与 DOM 相关的行为放入指令中。这使事情变得轻巧整洁。

于 2015-04-02T04:44:53.943 回答
2

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

您可以使用 ng-change 事件与输入进行交互，也可以使用自定义指令使用原始 javascript onChange 并最终调用 scope.$digest

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

<input type="text" name="test" ng-change="doChanges()" />
于 2015-04-02T04:33:55.070 回答
0

您还可以在指令上使用 $watchCollection。它返回一个取消注册函数，您可以调用该函数来取消绑定表单上的手表。这样做的好处是它观察表单，而不是模型或任何特定的输入。这样，只要表单上的任何输入被修改，$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>

于 2015-04-02T05:30:13.490 回答