Question

我需要向用户显示typing started and stopped。

所以，我写了一个ng-keyup用于检测已开始的输入，并写了ng-model-options="{debounce:800}"来检测停止的输入。

但问题是ng-keyup第一次没有解雇。

所以，我想为模型编写一个监视表达式来检测文本更改，而不是ng-keyup。

现在，问题是手表表达式在去抖动事件后被触发。因此，在键入停止后输入显示。

我的代码：

<textarea type="text" class="txt_message" placeholder="Type your message..." ng-enter="SendMessage()" ng-model="txtmessage" ng-change="TypingStopped()" ng-model-options="{debounce:800}" style="width:100%;"></textarea>

有人能建议我更好地选择打字功能吗？

提前致谢：）

Answer 1

keyup将不会响应第一次进入使用ng-keydown

Answer 2

您可以使用lodash.debounce和scope。$适用于此。如果你这么做我会推荐自定义指令。我使用和不使用自定义指令制作了示例。

angular.module('app', []);

angular.module('app').controller('Example', function ($scope) {
  this.msg = '';
  
  this.onStart = () => {
    this.msg = 'started';
  };
  
  this.onStop = _.debounce(() => {
    $scope.$apply(() => this.msg = 'stoped');
  }, 1000);
});

angular.module('app').directive('onStart', () => ({
  restrict: 'A',
  scope: {
    onStart: '&',
    onStop: '&'
  },
  link: (scope, element) => {
    let isStarted = false;
  
    element.on('keyup', () => {
      scope.$apply(() => {
        if (!isStarted) {
          isStarted = true;
          scope.onStart();
        }
      });
    });

    element.on('keydown', _.debounce(() => {
      scope.$apply(() => {
        isStarted = false;
        scope.onStop();
      });
    }, 800));
  }
}));

<script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>

<div ng-app="app" ng-controller="Example as Ex">
  <input type="text" ng-keyup="Ex.onStart()" ng-keydown="Ex.onStop()"><br>
  {{Ex.msg}}<br>
  
  <input type="text" on-start="text = 'started'" on-stop="text = 'stoped'"><br>
  {{text}}                                                                       
</div>

如果您不想将lodash添加到项目中，请查看此debounce implmentation：https://github.com/component/debounce/blob/master/index.js

去抖后AngularJS ng-watch事件发生

2 个答案: