Angularjs:即使在我将变量解析为整数之后，也要添加整数

Question

我在将两个数字相加时真的有一个奇怪的问题。

这是我的代码，在第一个控制器中一切正常，但是在第二个控制器中，如果我加上10而不是0，输出就完全奇怪了

下面是html代码

<div ng-app="">
<div ng-controller="Controller1">
    <br/>**** Controller-1
    <br/>Add 0 : {{update1(0)}}
    <br/>Add 10 : {{update1(10)}}
    <br/>Add 50 : {{update1(50)}}
    <br/>Add -60 : {{update1(-60)}}</div>
<div ng-controller="Controller2">
    <br/>**** Controller-2
    <br/>Add 10 : {{update2(10)}}
    <br/>Add 10 : {{update2(10)}}
    <br/>Add 50 : {{update2(50)}}
    <br/>Add -60 : {{update2(-60)}}</div>
</div>

这是我的javascript

function Controller1($scope) {
var x = 0;
$scope.update1 = function (smValue) {
    x += parseInt(smValue);
    return x;
}
}

function Controller2($scope) {
var y = 0;
$scope.update2 = function (smValue) {
    y += parseInt(smValue);
    return y;
}
}

这是输出

**** Controller-1 
Add 0 : 0 
Add 10 : 10 
Add 50 : 60 
Add -60 : 0

**** Controller-2 
Add 0 : 110 
Add 10 : 120 
Add 50 : 170 
Add -60 : 110

这是可以尝试的链接：http://jsfiddle.net/6VqqN/

有人能给我解释一下为什么会这样吗？即使我添加一个3位或4位数字，输出也与我预期的完全不同。

Answer 1

当您绑定到AngularJS中的函数时，每当函数中使用的变量之一发生更改时，它都会重新计算函数。

由于update1和update2更改了$scope.x，因此它会在无限循环中一次又一次地重新计算函数，因为在这些函数中使用了$scope.x。

现在，为什么它不在Controller1中发生呢？是的，你看不到它，因为在Controller1中的每个循环结束时，$scope.x的值被返回到0 (0 + 10 + 50 - 60 = 0)，所以无论你在这些函数中循环多少次，$scope.x总是等于相同的值。

在controller2中，每次循环结束时$scope.x的值为10 (0 + 10 + 10 + 50 - 60 = 10)，因此$scope.x的值会在每次循环后增加10。所以，如果有一个无限循环，为什么我的浏览器不冻结，仍然在controller2上显示一些值呢？因为AngularJS在10次迭代后停止$digest循环(这就是为什么$scope.x在最后一次迭代开始时等于10 ($scope.x在每次迭代后增加10，因此10 * 10 = 100)。

此外，parseInt也是多余的，因为您传递的变量已经是一个整数。