Question

我正在使用的框架（jQuery Mobile）侦听textareas的更改事件以更改标记。这是框架代码，所以我不能改变它并包含正确的AngularJS函数。

我通过ng-model将textarea绑定到范围变量。当范围变量发生变化（因此textarea内容因为它被绑定）时，不会触发javascript change事件。但是，如果没有更改事件，jQuery Mobile无法更改标记。

是否有内置方法让Angular在不编写指令的情况下触发更改事件？如果我使用指令或ng-change，我必须在textarea元素的每个匹配项中添加相应的代码。

我正在尝试做的简短示例（也可用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>

模型更新时，不会触发任何更改事件。如果您键入textarea并单击外部（基本的textarea更改），则会触发更改事件。

Answer 1

您可以“覆盖”您的ngModel手动触发更改事件：AngularJS - how to override directive 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
                }
            });
        }
      }
});

DEMO

Answer 2

为什么不使用ng-change

<div ng-app="app" ng-controller="Controller">
    <textarea ng-model="textValue" ng-change="changed()"></textarea>
</div>

也使用$ 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)
   })
});

Answer 3

addEventListener是本机的，而不是jquery的。此外，ng-model会覆盖change事件，特别是如果change事件是本机的。

如果您想使用ngModel并监听更改事件，请使用：https://docs.angularjs.org/api/ng/directive/ngChange（注意：此指令需要ngModel）

ng-model不会触发更改事件

3 个答案: