Question

我没有定期使用Angular，但我知道其中一个关键功能是，在表单元素上更新数据时，它会在模型中自动更新。

如果您使用的是jQuery等库，则必须手动将事件附加到表单输入，以便在更改模型时更新模型，如$('#myInput').on('change', updateModel);

虽然当用户更改myInput时会触发上述处理程序，但如果myInput被$('#myInput').val('hello world');

等Javascript代码更改，则不会触发该处理程序

我的问题是，Angular如何知道在Javascript代码中何时更改表单输入？

Answer 1

Angular在每次需要时（通过Angular函数）应用范围摘要，在此期间它会检查所有范围变量的状态，包括当前使用的模型。

如果您手动修改其中一些变量，使用JavaScript，jQuery等... Angular将不知道更改已经发生，您需要通过执行$scope.$apply()或通过包装代码来告诉它在$timeout回调中阻塞（这些是最常用的方法）。

如果你不手动操作，你必须等待一些（如果有的话）其他Angular事件才能触发摘要周期，这绝对不是好事。

请参阅此示例，请注意当您更新值时没有任何反应，但您需要手动执行此操作（ng-click执行此操作）才能更新DOM：

＆＃13;

angular.module('app', [])
.controller('Ctrl', function($scope){
  $scope.ourValue = 'Initial Value';
  window.exposedFunc = function(v, digest) {
    $scope.ourValue = v;
    if (digest) {
      $scope.$apply();
    }
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
  
  <button onclick="exposedFunc('First Button Value')">Update Value - No Digest</button>
  <button onclick="exposedFunc('Second Button Value', true)">Update Value - Force Digest</button>
  <button ng-click="">Force Digest only</button>
  <p>{{ourValue}}</p>
</div>

＆＃13;

这是使用keyup事件进行绑定的一个非常简单的示例。它应该足以让你开始你的项目：

＆＃13;

var res = document.getElementById('r');
function handleChange(v) {
  res.textContent = v;
}

＆＃13;

<input onkeyup="handleChange(this.value)" type="text" value="Initial value" />
<p id="r">No binding yet</p>

＆＃13;

AngularJS如何响应在Javascript中更新的表单值？

1 个答案: