JSFiddle - React, Tailwind, and code Playground

by Alborz mgm

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>angular directive encapsulating a delay for ng-change- by Alborz</title>
</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
    <script>
        var app = angular.module('app', []);
        app.controller('ctrl', function ($scope,$timeout) {
            $scope.requery = function (search) {
                console.log(search);
            }
        });
        app.directive('delaySearch', function ($timeout) {
            return {
                restrict: 'EA',
                template: ' <input ng-model="search" ng-change="modelChanged()">',
                link: function ($scope, element, attrs) {
                    $scope.modelChanged = function () {
                        $timeout(function () {
                            if ($scope.lastSearch != $scope.search) {
                                if ($scope.delayedMethod) {
                                    $scope.lastSearch = $scope.search;
                                    $scope.delayedMethod({ search: $scope.search });
                                }
                            }
                        }, 300);
                    }
                },
                scope: {
                    delayedMethod:'&'
                }
            }
        });

    </script>
    <div ng-app="app">
        <div ng-controller="ctrl">
            <delay-search delayed-method="requery(search)"></delay-search>
        </div>
    </div>
</body>
</html>