AngularJS-一种使HTML输入超时一秒钟然后调用$ watch的方法

Question

For example: I am typing in input text, that has an ng-model, and the $watch gets called instantly. Is there a way to call $watch after, let's say 2sec have passed from the last key pressed on the input control?

Answer 1

I wrote a simple directive for this kind of tasks. Consider this code:

.directive('delayedModel', function() {
    return {
        scope: {
            model: '=delayedModel'
        },
        link: function(scope, element, attrs) {

            element.val(scope.model);

            scope.$watch('model', function(newVal, oldVal) {
                if (newVal !== oldVal) {
                    element.val(scope.model);        
                }
            });

            var timeout;
            element.on('keyup paste search', function() {
                clearTimeout(timeout);
                timeout = setTimeout(function() {
                    scope.model = element[0].value;
                    element.val(scope.model);
                    scope.$apply();
                }, attrs.delay || 500);
            });
        }
    };
});

Usage:

<input type="text" delayed-model="searchText" data-delay="500" />

So the only thing you need to change is you use delayed-model instead of ng-model .

Demo: http://plnkr.co/edit/NuKE5Jt1aFY1RJsO71Jw?p=preview