Angular$scope$注意仅从表单(ng-model指令)更改的变量

Question

我有一个监听器，当模型发生更改时，它会向服务器发送HTTP请求。

JS代码：

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

HTML表单：

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

此代码运行良好。但是我的网络服务器也有一个网络套接字连接。如果其他人更改了这个模型，每个人都应该更新这个模型，但在这种情况下，他们不需要向服务器发送请求：

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

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

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-flur指令，而不是在控制器中添加手表。

在HTML:中

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

只有在用户手动更改表单上的值后，才会调用$scope.ngBlur函数（定义如下）。通过程序更改值（即$scop.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();
});

在这里你可以找到plunker：http://plnkr.co/edit/iczEWILyp5y0QuZBML80.