Angular $ scope。$ watch查找仅从形式更改的变量（ng-model指令）

Question

我有一个侦听器，当模型发生更改时，该侦听器会将HTTP请求发送到服务器。

JS代码：

$scope.a = 1;
$scope.$watch('a', function(newValue, oldValue) {
    sendSaveRequest(newValue);
});

HTML形式：

<form>
    <input ng-model="a" />
</form>

此代码可以正常工作。 但是我的Web服务器也有Web套接字连接。 而且，如果其他人更改了该模型，则每个人都应更新此模型，但是在这种情况下，他们不需要将请求发送到服务器：

socket.on('change', function(newValue) {
    $scope.a = newValue;
    $scope.$apply();
});

如何侦听仅从HTML表单（ng-model指令）发生的模型更改？

Answer 1

使用ng-change指令：

<form>
    <input ng-model="a" ng-change="sendSaveRequest(a)"/>
</form>

$scope.sendSaveRequest = sendSaveRequest;

仅当输入值的更改导致将新值提交给模型时才评估ngChange表达式。

不会被评估：

• 如果通过编程方式而不是通过更改输入值来更改模型

有关更多信息，请参见《 AngularJS ng-change Directive API Reference》 。

Answer 2

当模型值更改时，模板正在更新。当模板值更改时，它将立即写入控制台。

ng-model指令的示例链接： http : //jsfiddle.net/BtrZH/168/

Answer 3

您只需将套接字更改从摘要循环中取出，如下所示。 在这种情况下，不会调用监视程序，因此不会调用服务器。

socket.on('change', function(newValue) {
  setTimeout(function() {
      $scope.a = newValue;
  }, 1000);
});

Answer 4

您可以在输入中使用Angular的ng-blur指令，而不是在控制器中添加手表。

在HTML中：

<input ng-model="a" ng-blur="onBlur()"/>

仅在用户在表单上手动更改值之后，才会调用$ scope.ngBlur函数（定义如下）。 以编程方式更改值（即$ scope.a = newValue;）将不会调用该函数。

在控制器中：

$scope.a = '';
$scope.oldValue = $scope.a;

$scope.onBlur = function() {
  if ($scope.a !== $scope.oldValue) {
      $scope.oldValue = $scope.a;
      console.log('Request sending with value: ' + $scope.a);
      sendSaveRequest($scope.a);
  }
};

socket.on('change', function(newValue) {
    $scope.a = newValue;
    $scope.$apply();
});

在这里，您可以找到塞子： http ://plnkr.co/edit/iczEWILyp5y0QuZBML80。