如何防止 $watch 内部的值变化答案

【问题标题】：How to prevent value change inside $watch如何防止 $watch 内部的值变化
【发布时间】：2013-11-22 14:01:40
【问题描述】：

我正在$watching 用户可以在输入字段中编辑的范围值。我想确保 newValue 始终是一个数字，如果不是，请保留 oldValue 直到用户输入正确的数字值。

我该怎么做？

我目前正在做的是这个（在指令的链接函数内）：

scope.$watch('count',function(newValue,oldValue)
{
    newValue=parseInt(newValue,10);
    if(isNaN(newValue))
    {
        newValue=oldValue;
    }
});

这是正确的做法，还是有更好的方法？

谢谢。

【问题讨论】：

您想阻止用户在文本字段中输入字符串吗？还是只在手表上？
不一定。我正在考虑这一点，但现在我只想不要在范围模型上设置输入，除非它是我想要的。
@Stewie 一点也不，有时候设计师不想表现出“丑”type="number"
我不同意，因为使用数字输入不能解决问题。同样，您可以在数字输入中输入字符串值。
如果输入类型设置为“数字”，模型将不会收到字符串值。

标签： angularjs

【解决方案1】：

我会写$watch 喜欢：

 $scope.$watch('count',function(newValue,oldValue)
{
  if(newValue !== undefined && !newValue.match(/^[\d]+$/g)){

    $scope.count=oldValue;
  }
});

演示Plunker

【讨论】：

啊哈，所以newValue=oldValue 或return oldValue 还不够好？我必须明确设置f1 on scope`的值？
好的。正在考虑无论newValue 最终在$watch 处理程序执行后被设置在$scope.f1 变量上。
这不是反复触发$watch吗？例如，如果 oldValue = 3 和 newValue = 3a，则 $scope.count 设置为 3。$watch 再次触发 oldValue = 3a 和 newValue = 3
@Lizzie 当你有3 并输入a 时，你输入if 并给出计数新值，该值会触发另一个观看但总是在第二个循环中你没有输入@ 987654334@。所以没有消化循环问题。你有 plunker，只需测试它：plnkr.co/edit/KC4j7T28QE4T7xWacUgu?p=preview
请注意，如果您在 ng-change 上也有一个函数，则该函数会在手表之前调用（具有可能无效的值），一旦您将值设置回 oldValue，就不会再次调用.出于这个原因，我建议避免将ng-change 与$watch 混合使用。

【解决方案2】：

@Maxim 解决方案的一个特点是它需要对模型进行硬编码。它可以工作，但改进后的解决方案可能如下所示：

$scope.$watch('count',function(newValue,oldValue,scope) {
  if(newValue !== undefined && !newValue.match(/^[\d]+$/g)){
    scope[this.exp] = oldValue;
  }
});

为参数添加了“范围”。
使用“this.exp”查找模型名称
将 oldValue 直接存储到作用域上的模型中

【讨论】：

这很好。但是，我担心 this.exp 没有记录，因此如果他们决定更改名称，它将不再起作用。我错了吗？
@Francisc 这被设置为来自 $digest 调用 (watch.fn(value, ((last === initWatchVal) ? value : last), current);) 的监视对象。因此，由于它是一个局部变量，它可能会发生变化，您将失去此功能。
谢谢。 [额外字符]