Angular directive: opóźniona reakcja na zmianę tekstu

“Live search” może być bardzo ciekawym rozwiązaniem w aplikacji. Użytkownik pisze literki w textboxiku i bez wciskania entera czy guzika dostaje przefiltrowane wyniki. Tak jak to znamy z gógla chociażby.

Jeśli jednak reagować będziemy na każdą zmianę, to zanim użytkownik dostanie wynik zapytania “gdzie się podziały pieniądze z OFE” – wykonamy bardzo wiele zapytań. W takich przypadkach warto puszczać faktycznie zapytanie dopiero gdy nasz szukacz zaprzestanie pisania, czyli na przykład nie zmieni żadnej literki przez pół sekundy.

W angularze można to osiągnąć prawdopodobnie na wiele sposobów. Ja sięgnąłem po mechanizm dyrektyw i napisałem swoją, której wykorzystanie w kodzie wygląda tak:

<input obj="myFilter" delay="500" />

A sama dyrektywa:

.directive('delay', ['$timeout', function ($timeout) {
    return {
        restrict: 'A',
        scope: {
            obj: '='
        },
        link: function (scope, element, attrs) {
            var delay = attrs.delay;

            if (isNaN(parseInt(delay, 10))) {
                throw "Delay value in milliseconds must be defined";
            }
            scope.$watch('obj', function (newValue) {
                element.val(newValue);
            });

            var currentTimeout;
            element.keyup(function () {
                $timeout.cancel(currentTimeout);
                currentTimeout = $timeout(function () {
                    scope.obj = element.val();
                }, delay);
            });
        }
    };
}])

Nice.