javascript - ng-model 不会触发更改事件

Question

我正在使用的框架 (jQuery Mobile) 监听文本区域的更改事件以更改标记。这是框架代码，所以我无法更改它并包含正确的 AngularJS 函数。

我正在通过 ng-model 将文本区域绑定(bind)到范围变量。当范围变量发生变化时(因此文本区域内容因为它是绑定(bind)的)不会触发 javascript 更改事件。然而，如果没有更改事件，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>

当模型更新时，不会触发更改事件。如果您在文本区域中键入内容并在外部单击(基本的文本区域更改)，则会触发更改事件。

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