AngularJS 指令：封装ng-change的延迟

在本文中，我们将介绍如何在AngularJS中使用指令来封装ng-change，并添加延迟功能。ng-change是AngularJS中非常常用的指令之一，用于监测输入框的值变化。然而，在某些情况下，我们希望在输入值变化后不立即触发ng-change事件，而是延迟一段时间后再执行，以免频繁触发。

阅读更多：AngularJS 教程

延迟功能的需求

假设我们有一个搜索框，用户在输入框中输入文字时，需要将其输入的值发送到服务器进行搜索，并实时展示搜索结果，这个需求看起来很简单，我们可以直接在input元素中使用ng-change指令来实现：

<input type="text" ng-model="searchText" ng-change="search()" />

在这个例子中，ng-change指令监测到输入框中的值发生变化时，会立即调用search函数。但是，如果用户输入较快，每次输入都会触发search函数，可能导致频繁的网络请求，影响性能和用户体验。

为了解决这个问题，我们可以通过封装一个指令来实现延迟功能。

指令的实现

我们可以创建一个名为ngDelayChange的指令来封装ng-change，并添加延迟功能。

angular.module('myApp').directive('ngDelayChange', function( $timeout) { return { restrict: 'A', require: 'ngModel', link: function(scope, element, attrs, ngModelCtrl) { var delay = parseInt(attrs.ngDelayChange) || 1000; // 默认延迟1秒 var timer = null; element.on('input', function() {$ timeout.cancel(timer); // 取消之前的延迟
                timer =  $timeout(function() { scope.$ apply(function() {
                        ngModelCtrl. $commitViewValue(); // 提交最新的视图值 ngModelCtrl.$ setPristine(); // 设置为初始状态
                        ngModelCtrl. $setUntouched(); // 设置为未触碰过 scope.$ eval(attrs.ngChange); // 在作用域中执行ng-change表达式
                    });
                }, delay);
            });

            scope. $on('$ destroy', function() {
                $timeout.cancel(timer); // 销毁指令时取消延迟
            });
        }
    };
});

在这个指令的link函数中，我们通过监听input元素的input事件来实时获取输入框的值，并通过 $timeout服务来实现延迟功能。指令中的delay变量表示延迟的毫秒数，默认为1000毫秒（1秒）。通过$ timeout.cancel()方法可以取消之前的延迟，确保最终只执行最后一次延迟回调函数。

使用ngDelayChange指令的示例代码如下所示：

<input type="text" ng-model="searchText" ng-delay-change="2000" ng-change="search()" />

在这个例子中，我们将延迟设置为2000毫秒（2秒），用户在输入完毕2秒钟后才会触发search函数。

示例说明

下面通过一个完整的示例来说明ngDelayChange指令的使用。假设我们有一个聊天应用，用户在输入框中输入文字时，我们需要发送请求获取匹配的聊天记录，并将结果实时展示给用户。

首先，我们可以绑定输入框的ng-model到searchText变量上：

<input type="text" ng-model="searchText" ng-delay-change="1000" ng-change="search()" />

然后，在控制器中定义search函数：

$scope.search = function() {
    // 调用API发送请求并处理返回的聊天记录
    // ...
};

最后，在ngDelayChange指令中添加延迟逻辑，确保在用户输入结束后才触发search函数：

angular.module('myApp').directive('ngDelayChange', function( $timeout) { return { restrict: 'A', require: 'ngModel', link: function(scope, element, attrs, ngModelCtrl) { var delay = parseInt(attrs.ngDelayChange) || 1000; // 默认延迟1秒 var timer = null; element.on('input', function() {$ timeout.cancel(timer); // 取消之前的延迟
                timer =  $timeout(function() { scope.$ apply(function() {
                        ngModelCtrl. $commitViewValue(); // 提交最新的视图值 ngModelCtrl.$ setPristine(); // 设置为初始状态
                        ngModelCtrl. $setUntouched(); // 设置为未触碰过 scope.$ eval(attrs.ngChange); // 在作用域中执行ng-change表达式
                    });
                }, delay);
            });

            scope. $on('$ destroy', function() {
                $timeout.cancel(timer); // 销毁指令时取消延迟
            });
        }
    };
});

这样，当用户在输入框中输入文字时，将会延迟1秒钟后触发search函数。