Question

我希望在用户完成angularjs中的写入（没有输入）后触发搜索。

我的html（简体）：

<div ng-class="input-append" ng-controller="searchControl">
  <input type="text" ng-model="ajaxSearch" ng-change="search();">
</div>

我的AngularJs（简化）：

$scope.searchControl = function() {                
  $scope.search = function(){
    $http({
          method: 'POST',
          url: '<?php echo base_url('system/ajax_search/') ?>',
          'data: search=' + $scope.ajaxSearch,
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
       }).success(function(data) {
          $scope.result = data;
       });
}

原始代码很广泛，所以我简化了。在我的代码中，我发布数据总是我的用户更改搜索。我希望在用户停止写入后几秒钟发布数据。

有什么想法吗？

Answer 1

这可以通过指令轻松实现：

angular.module('myApp', [])
.directive('keyboardPoster', function($parse, $timeout){
  var DELAY_TIME_BEFORE_POSTING = 3000;
  return function(scope, elem, attrs) {
    var element = angular.element(elem)[0];
    var currentTimeout = null;

    element.onkeypress = function() {
      var model = $parse(attrs.postFunction);
      var poster = model(scope);
      if(currentTimeout) {
        $timeout.cancel(currentTimeout)
      }
      currentTimeout = $timeout(function(){
        poster();
      }, DELAY_TIME_BEFORE_POSTING)
    }
  }
})
.controller('testController', function($scope){
  $scope.search = function() {
    console.log("Executing query...");
  }
})

它可以像这样使用......

<div ng-app='myApp' ng-controller='testController'>
  <input type="text" keyboard-poster post-function="search">
</div>

使用$timeout并在每次用户输入时取消;如果超时运行，则执行作为attr给出的作用域函数。您可以将延迟时间修改为更适合您的用户体验的任何内容（我不会将其降至1000以下）。

完成在angularjs中写完后触发一个事件

1 个答案: