防止 Angular $watch 循环答案

【问题标题】：Prevent Angular $watch from looping防止 Angular $watch 循环
【发布时间】：2015-07-30 17:15:59
【问题描述】：

我正在整理一个快速的资金输入，它会自动将小数点添加到输入的金额中。但是我遇到了一个问题，我的 $watch 函数永远循环然后出错。这就是我所拥有的：

$scope.$watch('enteredBillAmount.number', function(newValue, oldValue) {
    if(!angular.equals(newValue, oldValue)) {
        $scope.enteredBillAmount.number = Number(newValue) / 100;
    }
});

任何建议将不胜感激。

【问题讨论】：

标签： angularjs angularjs-scope watch angularjs-digest

【解决方案1】：

您的 watch 函数会更改您正在观看的项目，所以它当然会循环播放。每次函数运行时都会触发手表。

您可以做以下两件事之一，或者为数字使用不同的变量：

$scope.$watch('enteredBillAmount.number', function(newValue, oldValue) {
    if(!angular.equals(newValue, oldValue)) {
        $scope.enteredBillAmountNumber = Number(newValue) / 100;
    }
});

但是，考虑到这只是一个格式化功能，您还可以创建一个自定义过滤器：

angular.filter('bill', function() {
  return function(input) {
    return input ?  Number(input) / 100 : '';
  };
});

【讨论】：

【解决方案2】：

Angular 有一个内置的货币过滤器，你应该考虑使用它。这也将使用系统的语言环境，非常方便。你将如何使用它是你输出的地方：

&lt;span id="billedAmount"&gt;{{enteredBillAmountNumber | currency}}&lt;/span&gt;

如果你需要在控制器中使用这个，你可以注入 $filter 然后使用：

var myFormattedAmount =  $filter('currency')($scope.enteredBillAmountNumber);

【讨论】：