3

編集：

ループの問題を回避するために例を更新します。元の質問に戻って、B モデル オブジェクトを再計算します。

この例では: http://jsfiddle.net/qn2Wa/

<div ng-app>
    <div ng-controller="A"><input ng-model="m">
        {{a()}}
    </div>
    <div ng-controller="B"><input ng-model="m">
        {{b()}}
    </div>
</div>

JS

function A($scope) {
    $scope.m='a';
    var counter = 0;
    $scope.a = function(){
        console.log("A " + counter++);
        return $scope.m;
    }
}
function B($scope) {
    $scope.m='b';
    var counter = 0;
    $scope.b = function(){
        console.log("B " + counter++);
        return $scope.m;
    }
}

コントローラ A の入力値を変更するとすぐに、まったく別のコントローラにある b() が呼び出されます。他のコントローラでモデル オブジェクトを再計算するのはなぜですか? これを回避する方法はありますか？

コンソール ログを見ると、まったく別のコントローラーとスコープにある A 入力フィールドに何かを入力するたびに B が出力されることがわかります。

参考までに、質問の元のコードをここに保持します。一部のコメントで指摘されているように、関数呼び出しでモデルを更新しているため、エラーが発生しています。これは上記のコードで修正されています。エラーは別の質問に移動できます。

http://jsfiddle.net/m8xtA/

<div ng-app>
    <div ng-controller="A"><input ng-model="m">
        {{a()}} - {{counter}}
    </div>
    <div ng-controller="B"><input ng-model="m">
        {{b()}} - {{counter}}
    </div>
</div>

JS

function A($scope) {
    $scope.m='a';
    $scope.counter = 0;
    $scope.a = function(){
        $scope.counter++;
        return $scope.m;
    }
}
function B($scope) {
    $scope.m='b';
    $scope.counter = 0;
    $scope.b = function(){
        $scope.counter++;
        return $scope.m;
    }
}
4

2 に答える 2

2

ここに実用的なソリューションがあります:

http://jsfiddle.net/m8xtA/1/

$watchを使用することは、それを達成するための良い方法です。

function A($scope) {
    $scope.m='a';
    $scope.counter = 0;
    //executed each time `m' is changed
    $scope.$watch('m',function(){
        $scope.counter++;
    })
}
function B($scope) {
    $scope.m='b';
    $scope.counter = 0;
    //executed each time `m' is changed
    $scope.$watch('m',function(){
        $scope.counter++;
    })
}

この助けを願って、乾杯

于 2013-09-08T17:39:22.493 に答える
1

テンプレートのレンダリング中に、テンプレートのバインドに使用されるモデルまたはオブジェクトを変更すると、新しいレンダリング サイクルがトリガーされ、無限ループが発生します。このエラーが発生します'Error: 10 $digest() iterations reached. Aborting!'.

あなたのコードでは、 がレンダリングされると、ステートメントによって{{a()}}オブジェクトが変更されます。これにより、テンプレートで をレンダリングする必要があるため、無限ループがトリガーされます。counter$scope.counter++;{{counter}}

(表示されるのは評価が壊れていることが原因であるため、おかしな動作が見られます。)

于 2013-09-08T17:43:43.810 に答える