delayed Search

by graphicsxp

HTML

<div ng-app="myApp" ng-controller="myController">   
<delayed-search model="filterCriteria"></delayed-search>
    
    <span>{{filterCriteria}}</span>
</div>

JavaScript

angular.module('myApp', []).directive("delayedSearch", ['$timeout', function($timeout) {
    return {
        restrict: "E",
        template: '<input type="text" ng-model="model" />',
        scope: {
            model : '='
        },
        link: function (scope, element, attrs) {
            var timer = false;
            scope.$watch('model', function (newVal) {
                if(newVal){
                    if (timer) {
                        $timeout.cancel(timer);
                    }
                    timer = $timeout(function () {
                        alert('timeout expired');
                    }, 1000);
                }
                
            });
        }
    }
}]).controller('myController', function($scope){
    
   
});