3

2つの数字を足すと本当に奇妙な問題があります。

これが私のコードです。最初のコントローラーではすべて正常に動作していますが、2番目のコントローラーでは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桁の数字を追加しても、出力が予想とはまったく異なります。

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 と click でのみ呼び出されるため、すべてが期待どおりに機能します。

2) 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) を呼び出すと、x に 10 が加算され、x が変化するのを待ちます。2回目に呼び出すと、x値を再度変更すると、最初の関数が再度呼び出され、その2回目が再度呼び出されます..

于 2013-10-30T09:44:36.390 に答える
0

AngularJS で関数にバインドすると、関数で使用される変数の 1 つが変更されるたびに、関数が再評価されます。
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渡す変数はすでに整数であるため、冗長です。

于 2013-10-30T09:37:41.813 に答える