一尘不染

手动AngularJS更新输入不会触发模型更改

angularjs

当我从纯JavaScript更改输入元素的值时，则不会更新角度模型。有什么方法可以通过在更改后手动触发一些事件来触发更新吗？

<body ng-controller="MainCtrl">
  <script>
    function changeValue() {
      var e = document.getElementById("field");
      e.value = "updated value";
    }
  </script>

  field: <input type="text" id="field" ng-model="field">{{field}}
  <br>
  <button onclick="changeValue()">Change the value</button>

</body>

完整的示例可以在plunkr上找到。单击按钮后，我希望会{{field}}以某种方式更新。有办法吗？

阅读 226

2020-07-04

共1个答案

一尘不染

您不应该这样做（除非用于测试，但即使如此，也请考虑量角器）。以这种方式与angular交互是一个坏主意。但是，如果必须，这是您的操作方法。

function changeValue() {
  var e = document.getElementById("field");
  e.value = "updated value";
  var $e = angular.element(e);
  $e.triggerHandler('input');
}

plnkr

一种不同的中间方式是

function changeValue() {
  var e = document.getElementById("field");
  var scope = angular.element(e).scope();
  scope.field = "updated value";
  scope.$digest();
}

plnkr

正确的方法是使用角度控制器

  $scope.changeValue = function(){
    $scope.field = "updated value";
  };

plnkr

2020-07-04