Question

ng-change立即触发，但我想在向服务器发送请求之前引入一些延迟。我已经阅读了关于手表功能但看起来没有＆＃34;简单＆＃34;溶液

快速重构的想法是为了在下面的代码中添加简单的延迟吗？

$scope.searchOrder = null
$scope.change = (text) ->
  search_params = $scope.searchOrder
  $http.get('./api/orders?q=' + search_params).success( (data) ->
    $scope.orders = data
    console.log('Found matching order.')
    #console.log data
  ).error( ->
    console.error('No orders found.')
  )

Answer 1

尝试：

var delayDuration = 200;
$scope.searchOrder = null
$scope.change = (text) ->
$timeout( ->
search_params = $scope.searchOrder
      $http.get('./api/orders?q=' + search_params).success( (data) ->
        $scope.orders = data
        console.log('Found matching order.')
        #console.log data
      ).error( ->
        console.error('No orders found.')
      ), delayDuration);

代码应该是非常自我解释的。它只使用AngularJS timeout service。您应该在js setTimeout方法上使用它，以便angular知道它何时完成。

Answer 2

我相信我已经通过创建一个名为ngDelay的指令以切线方式here回答了这个问题。这可以通过正常方式使用ng-change来实现。看看，看看它是否有帮助。

Answer 3

你可以利用debounce属性ngModelOptions提供的方法，在不使用$ timeout的情况下轻松实现。这是一个例子：

JS fiddle example

HTML：

<div ng-app='app' ng-controller='Ctrl'>
    <input type='text' placeholder='Type a name..'
        ng-model='vm.name'
        ng-model-options='{ debounce: 1000 }'
        ng-change='vm.greet()'
    />

    <p ng-bind='vm.greeting'></p>
</div>

JS：

angular.module('app', [])
.controller('Ctrl', [
    '$scope',
    '$log',
    function($scope, $log){
        var vm = $scope.vm = {};

        vm.name = '';
        vm.greeting = '';
        vm.greet = function greet(){
            vm.greeting = vm.name ? 'yo, ' + vm.name + '!' : '';
            $log.info(vm.greeting);
        };
    }]);

引入角度变化的延迟

3 个答案: