Angular $scope.$watch 用于仅从表单更改的变量（ng-model 指令）

Posted 2023-02-16

【中文标题】Angular $scope.$watch 用于仅从表单更改的变量（ng-model 指令）

【英文标题】：Angular $scope.$watch for variables that changed only from the form (ng-model directive)

【发布时间】：2015-12-15 11:26:43

【问题描述】：

我有一个侦听器，当我对模型进行更改时，它会向服务器发送 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-​​model 指令）？

【参考方案1】：

使用ng-change 指令：

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

$scope.sendSaveRequest = sendSaveRequest;

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

它不会被评估：

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

有关详细信息，请参阅AngularJS ng-change Directive API Reference。

【参考方案2】：

当模型值发生变化时，模板正在更新。当模板发生变化时，立即写入控制台。

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

【讨论】：

但是我需要知道模型中的变化是来自外部的当前用户。

你想听只出现在表单中吗？

【参考方案3】：

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

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

【讨论】：

我更新了问题。我添加了 $scope.$apply();在套接字侦听器中。而且我希望在 $scope.$apply()

之后不会调用观察者

但是如果你不想让 watcher 被称为你为什么要添加 apply()？

【参考方案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();
);

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