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

Angularjs: addition of integers even after I parse the variable as integer

本文关键字：整数 之后 添加 变量 Angularjs      更新时间：2023-09-26

我在添加两个数字时确实遇到了一个奇怪的问题。

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

这是 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 位数字，输出也与我预期的完全不同。

我会用一个稍微不同的例子来回答。

这个工作正常
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（） 仅在初始化和单击时调用。

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 值，这会导致再次调用第一个函数，在第二次调用之后再次调用，依此类推。

当您绑定到 AngularJS 中的函数时，每当函数中使用的变量之一发生变化时，它都会重新计算该函数。
由于 update1 和 update2 更改了 $scope.x，因此它会在无限循环中一次又一次地重新计算函数，因为 $scope.x 在这些函数中使用。
现在，为什么它没有在控制器 1 中发生？确实如此，您只是看不到它，因为在 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是多余的，因为您传递的变量已经是整数。

相关文章：