Question

这是我第一次在这里发帖，所以我希望你能提供帮助。

我在使用$ scope时出现问题。$ watch。问题是我想控制表单上的2个DateTime字段，当其中1个更改时，计算它们之间的差异，以填充表单的另一个数字输入。问题是，当我运行应用程序并更改日期时，consolo会向我显示：http://imgur.com/BAi9wSD

这是我使用的代码。

$scope.$watch(
             "vm.siniestro.fechaOcurrencia",
             function handleFechaChange(newValue, oldValue) {
                 console.log('newValue: ' + newValue + ', oldValue: ' + oldValue);
                 if (newValue !== oldValue) {
                     vm.calculoDecalaje();
                 }
             });

vm.calculoDecalaje = function () {
             vm.siniestro.fechaOcurrencia = moment(vm.siniestro.fechaOcurrencia);
             vm.siniestro.fechaComunicacion = moment(vm.siniestro.fechaComunicacion);
             vm.siniestro.decalaje = vm.siniestro.fechaComunicacion.value - vm.siniestro.fechaOcurrencia.value;
         }

谢谢。

Answer 1

你有一个无限循环 - 让我们逐步完成这里发生的事情：

vm.siniestro.fechaOcurrencia更改，导致您的监视功能（handleFechaChange）运行。
handleFechaChange来电vm.calculoDecalaje();。
vm.calculoDecalaje更改vm.siniestro.fechaOcurrencia，导致您的监视功能再次运行，导致vm.calculoDecalaje再次运行，这会导致您的监视功能再次运行...

在10个消化周期之后，Angular意识到值永远不会稳定，因此它会杀死无限循环以阻止浏览器崩溃。这就是你获得infinite digest error。

的原因

我的建议是更改vm.calculoDecalaje函数，使其不会改变输入值：

vm.calculoDecalaje = function () {
    vm.siniestro.decalaje = moment(vm.siniestro.fechaComunicacion).value - moment(vm.siniestro.fechaOcurrencia).value;
}

这样你的用户输入仍然是关于函数内容的“事实来源”（我发现它更容易跟踪），并且你不会让你的观察者失控。< / p>

Answer 2

建议不要使用$ watch，建议您在两个字段的模板中使用ng-change。

Answer 3

添加一些信息Joe Clay回答。 Angular运行摘要循环，因为它无法告诉您fechaOcurrencia和fechaComunicacion是稳定的，因为您每次都会创建新的moment对象。 Angular将其视为新价值。你应该谷歌短语＆＃34; memoization angular＆＃34;找到如何解决问题的多个例子。

使用$ scope。$ watch的迭代错误

3 个答案: