javascript ng-model 不触发更改事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25062134/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ng-model does not trigger change event
提问by Marcus Krahl
A framework I am using (jQuery Mobile) listens for the change event of textareas to change the markup. This is framework code so I cannot alter it and include the correct AngularJS functions.
我正在使用的框架 (jQuery Mobile) 侦听 textareas 的更改事件以更改标记。这是框架代码，因此我无法更改它并包含正确的 AngularJS 函数。
I am binding the textarea to a scope variable via ng-model. When the scope variable changes (and thus the textarea content because it is bound) no javascript change event is fired. However without the change event jQuery Mobile cannot change the markup.
我正在通过 ng-model 将 textarea 绑定到范围变量。当范围变量改变时（因此 textarea 内容因为它被绑定）不会触发 javascript 更改事件。但是，如果没有更改事件，jQuery Mobile 将无法更改标记。
Is there a builtin way to let Angular trigger the change event without writing a directive? If I use a directive or ng-change I have to add the corresponding code to every occurrence of a textarea element.
是否有一种内置方法可以让 Angular 在不编写指令的情况下触发更改事件？如果我使用指令或 ng-change，我必须将相应的代码添加到 textarea 元素的每次出现中。
Short example of what I am trying to do (also available as jsFiddle):
我正在尝试做的简短示例（也可用作jsFiddle）：
<div ng-app="app" ng-controller="Controller">
<textarea ng-model="textValue"></textarea>
</div>
<script type="text/javascript>
var module = angular.module("app",[]);
module.controller("Controller", function ($scope) {
$scope.textValue = "Test";
window.setInterval(function () {
$scope.textValue = $scope.textValue === "Test" ? "Hello World" : "Test";
$scope.$apply();
},2000);
});
//Dummy framework code which I do not have access to
document.querySelector("textarea").addEventListener("change", function () {
alert("changed");
});
</script>
When the model updates, no change event is fired. If you type into the textarea and click outside (a basic textarea change), the change event fires.
当模型更新时，不会触发任何更改事件。如果您在 textarea 中键入并在外部单击（基本 textarea 更改），则将触发更改事件。
回答by Khanh TO
You could "override"your ngModelto trigger change event manually: AngularJS - how to override directive ngClick
您可以“覆盖”您ngModel手动触发更改事件：AngularJS - 如何覆盖指令 ngClick
module.directive("ngModel",function(){
return {
restrict: 'A',
priority: -1, // give it lower priority than built-in ng-model
link: function(scope, element, attr) {
scope.$watch(attr.ngModel,function(value){
if (value){
element[0].onchange();
// element.trigger("change"); use this for jQuery
}
});
}
}
});
回答by harishr
why dont you use ng-change
你为什么不使用 ng-change
<div ng-app="app" ng-controller="Controller">
<textarea ng-model="textValue" ng-change="changed()"></textarea>
</div>
also use $interval
也使用 $interval
module.controller("Controller", function ($scope) {
$scope.textValue = "Test";
var interval = $interval(function () {
$scope.textValue = $scope.textValue === "Test" ? "Hello World" : "Test";
},2000);
$scope.changed = function(){
alert('changed');
}
$scope.$on("$destroy", function(){
$interval.cancel(interval)
})
});
回答by Luis Masuelli
The addEventListener is native, not a jquery one. Also, the ng-model overrides the change event, specially if the change event is native.
addEventListener 是本机的，而不是 jquery 的。此外，ng-model 会覆盖 change 事件，特别是如果 change 事件是原生的。
If you want to use ngModel and also listen the change events, use: https://docs.angularjs.org/api/ng/directive/ngChange(be careful: this directive REQUIRES ngModel)
如果您想使用 ngModel 并监听更改事件，请使用：https://docs.angularjs.org/api/ng/directive/ngChange（注意：此指令需要 ngModel）
