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

时间:2013-09-17 03:42:33

标签: javascript ajax angularjs

我希望在用户完成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;
       });
}

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

有什么想法吗?

1 个答案:

答案 0 :(得分:4)

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

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以下)。