2

AngularJS ディレクティブでバインディング タイミングの問題が発生しています。そのコントローラーは次のようになります。

controller: function($element, $scope)
{
    $element.find("input").bind("blur", function()
    {
        SendUpdate();
    });

    $scope.Subtract = function()
    {
         Add(-$scope.step);
    }

    $scope.Add = function()
    {
        Add($scope.step);
    }

    function Add(amount)
    {
        $scope.model = parseInt($scope.model) + parseInt(amount);
        console.log("Model: " + $scope.model);
        SendUpdate();
    }

    function SendUpdate()
    {
        $scope.$emit("ProcessUpdate");
    }
}

ここまではすべて正常に動作し、値 100 から開始して 10 を追加すると、予想どおり Model: 110 が出力されます。ただし、モデルがバインドされている変数を提供している親スコープによってイベントが処理される場合、イベントが発生するまでに更新された値を受け取っていません。

$scope.$on("ProcessUpdate", function()
{
    console.log("MyValue: " + $scope.MyValue);
});

ディレクティブのモデル変数にバインドされているのは $scope.MyValue ですが、MyValue: 100 が出力されます (「=」バインド文字も使用しています)。

実際、値は更新されています。同じ正確なものを印刷するボタンを押すと：

console.log("MyValue: " + $scope.MyValue);

MyValue: 110 の正しい値が出力されます。したがって、これは明らかにタイミングの問題です。次の順序で物事が起こっているようです。

  1. ディレクティブの $scope.model を更新します。
  2. イベントを発生させます。
  3. イベントを処理します。
  4. 親の $scope.model を更新します。

イベントが発生したときに親スコープを最新にする必要があるため、1 の直後に 4 が発生する必要があります。

これを行うべき別の方法はありますか？これらのディレクティブはいくつでも起動する可能性があり、それらはすべて親スコープを処理する必要があるため、イベントを介して更新された値を渡したくありません。何が変更されたかを把握し、それに応じて注入する必要はありません。親スコープがディレクティブの新しい値を受け取った後にイベントを発生させたいだけです。

ありがとうございました。

4

2 に答える 2

2

問題は、イベント (即時) を使用しており、双方向バインディングが Angular$digestループを使用していることです。$onを使用する代わりに、代わりに関数$emitを使用するのはどうですか?$watch

ディレクティブでは、次のようにします。

$scope.$watch("MyValue", function(newValue, oldValue) {
  console.log("MyValue: " + $scope.MyValue);
});

そして、コントローラーで行う必要があるのは、 remove だけSendUpdateです。

于 2013-06-06T19:20:23.360 に答える