AngularJS - 在NG-变化消防$超时事件只有一次事件、AngularJS、NG
我有一个输入字段中的HTML绑定到一个范围的变量的NG-变化。
＆LT;输入类型=文本NG模型=测试NG-变化=更改（）要求＆GT;VAR变化=功能（）{redraw_graph（）} 现在当我改变输入框，它重绘每一个新的角色我写的图形。我想有一个延时（N秒），所以角将等待完成用户之前的NG-变化事件触发前打字。如果有多个NG-更改事件发射，它取消了较早的，只执行了最新的。
我已经注册成立，超时延迟，但N秒后，NG-change事件仍激发不止一次。我以前就解决了这个问题，但我无法弄清楚如何目前做到这一点。
解决方案要我好像你问的是已经建成AngularJS。因此，如果你利用的 ngModelOptions 指令可以使用防抖动属性：
NG-模式选项={防抖动：1000}
引述的文档
../或去抖动延迟，使得实际的更新仅发生 当计时器到期;此计时器会后的另一个变化复位 发生。
结果工作示例\r\r
angular.module（'optionsExample'，[]）\r .controller（'ExampleController'，['$范围'，\r 功能（$范围）{\r $ scope.user = {\r 名称：'说'\r };\r }\r ]）; 
\r
＆LT;！DOCTYPE HTML＆GT;\r＆LT; HTML LANG =ENGT＆;\r\r＆LT; HEAD＆GT;\r ＆LT;间的charset =UTF-8＆GT;\r ＆LT;标题物实施例 - 例如，ngModelOptions-指令去抖生产＆LT; /标题＆GT;\r ＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.5/angular.min.js\"></script>\r ＆所述; SCRIPT SRC =app.js＆GT;＆下; /脚本＆GT;\r＆LT; /头＆GT;\r\r＆LT;机身NG-应用=optionsExample＆GT;\r ＆LT; DIV NG控制器=ExampleController＆GT;\r ＆LT;表格名称=窗体＆GT;\r 名称：\r ＆LT;输入类型=文本\r NAME =username的\r NG-模式=user.name\r NG-模式选项={防抖动：1000}/＆GT;\r ＆LT;按钮NG点击=$ userForm.userName rollbackViewValue（）; user.name =''＆GT;清除＆LT; /按钮＆GT;\r ＆LT; BR /＆GT;\r ＆LT; /表及GT;\r ＆LT; pre＆GT; user.name =＆LT;跨度NG绑定=user.name＆GT;＆LT; / SPAN＆GT;＆LT; / pre＆GT;\r ＆LT; / DIV＆GT;\r＆LT; /身体GT;\r\r＆LT; / HTML＆GT; \r\r\r
I have an ng-change on an input field in html that's bound to a scope variable.
<input type="text" ng-model="test" ng-change="change()" required>
var change = function(){ redraw_graph()}
Now when I change the input box, it redraws the graph for every new character I write. I want to have a delay (N seconds), so angular will wait before the user is done typing before the ng-change event fires. And if there are multiple ng-change events fired, it cancels the earlier ones and only executes the latest ones.
I've incorporated the delay with a timeout, but after N seconds the ng-change event still fires more than once. I've solved this problem before, but I can't figure out how to do it currently.
解决方案To me it seems like what you're asking for is already built into AngularJS. Thus, if you make use of the the ngModelOptions directive you can use the debounce property:
ng-model-options="{ debounce: 1000 }"
To quote the docs
.."/or a debouncing delay so that the actual update only takes place when a timer expires; this timer will be reset after another change takes place."
Working sample
angular.module('optionsExample', [])
.controller('ExampleController', ['$scope',
function($scope) {
$scope.user = {
name: 'say'
};
}
]);
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-ngModelOptions-directive-debounce-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.5/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="optionsExample">
<div ng-controller="ExampleController">
<form name="userForm">
Name:
<input type="text"
name="userName"
ng-model="user.name"
ng-model-options="{ debounce: 1000 }" />
<button ng-click="userForm.userName.$rollbackViewValue(); user.name=''">Clear</button>
<br />
</form>
<pre>user.name = <span ng-bind="user.name"></span></pre>
</div>
</body>
</html>
