delayed Search

by graphicsxp

HTML

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

JavaScript

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