3

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

这是我的代码，在第一个控制器中一切正常，但在第二个控制器中，如果我添加 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 位数字，输出也与我的预期完全不同。

4

2 回答 2

2

我会用一个有点不同的例子来回答。

这个工作正常
1) http://jsfiddle.net/QThdE/1/

这个问题和你的一样：
2）http://jsfiddle.net/SE5a3/1/

两个例子都使用相同的控制器：

function MyController($scope){
    var x=parseInt(00);
    $scope.updateX = function(smValue){
        x += parseInt(smValue);
    }
    $scope.printX = function() {
        return x;
    }
}

神奇的是这两个函数都依赖于x，并且两个函数都等待这个变量的变化。

1）所以在第一种情况下：

<div ng-app="" ng-controller="MyController" ng-init="updateX(5)">
    {{printX(0)}}
    <br/><a ng-click="updateX(10)">Click to increase by 10</a>
</div>

一切都按预期工作，因为updateX()仅在 init 和单击时调用。

2）第二个例子有无限循环，就像你的例子一样：

<div ng-app="" ng-controller="MyController">
    {{printX(0)}}
    {{updateX(5)}}
    <br/><a ng-click="updateX(10)">Click to increase by 10</a>
</div>

为什么？让我们看看 Angular 是如何编译这个视图的：

1) {{printX(0)}} - 打印当前 x 值并等待有人触摸 x
2) {{updateX(5)}} - 更新 x 值，因为它也依赖于 x，所以它也等待有人触摸x
3) {{printX(0)}} - 作为步骤 2) 更改了 x 值，此函数再次调用并打印 x 值（同时接触 x 值）
4) {{updateX(5)}} - 作为步骤3）触摸x值，这个函数再次调用..
5）等等。

与您的示例相同：

<br/>Add 10 : {{update2(10)}}
<br/>Add 10 : {{update2(10)}}

第一次调用 update2(10) 时，它会将 10 添加到 x，并等待 x 更改。第二次调用它时，再次更改 x 值，这会导致再次调用第一个函数，然后再次调用第二个函数，依此类推..

于 2013-10-30T09:44:36.390 回答
0

当您绑定到 AngularJS 中的函数时，每次函数中使用的变量之一发生变化时，它都会重新评估该函数。
由于 update1 和 update2 更改了 $scope.x，它会在无限循环中一次又一次地重新评估函数，因为在这些函数内部使用了 $scope.x。
现在，为什么它不在 Controller1 中发生？确实如此，您只是看不到它，因为在 Controller1 中的每个循环结束时，$scope.x 的值返回为 0 (0 + 10 + 50 - 60 = 0)，所以无论您循环多少次通过这些函数 $scope.x 将始终等于相同的值。
在控制器 2 中，$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是多余的，因为您传递的变量已经是一个整数。

于 2013-10-30T09:37:41.813 回答