角度 - イベントループを防止しますか？

Question

私はまだイベント処理に問題があるので、私はあなたの助けが必要です。 コンセプトは次のとおりです。

コンテキストを設定するには、私がビジュアルアイテムを持っているとしましょう。私は「コンポーネント」と呼んでいます。 コンポーネントは2つのjavascriptオブジェクトで定義されています。 1つはデータ（位置x、y、幅、高さ、色など）を含んでいます。もう1つは、draw2dという名前の第三者ライブラリを利用したビューです。 Draw2dは、それ自身のxy幅の高さの色などのプロパティを使用します。つまり、値を常に同じに保つために値をバインドする必要があるということです。

この目的のために、私はイベントを使用します。私が論文の修正を見ることを可能にするdraw2dの 'on'イベントがあります。角度のある側については、データバインディングで直接ng-modelディレクティブを使用します。データが更新されると、私はdraw2dビューを更新し、ビューを編集するとデータを更新します。 この部分は正しく処理されていますが、これを処理するのは難しくありません。

その後、複数の選択編集を実装しようとしました。そのために、私は選択されたコンポーネントごとに配列を格納します。ビューまたはデータからの値が編集されると、選択されたすべてのコンポーネントが同じデータを同じ値に設定できるイベントが発生します。再び、それは素晴らしい仕事です。

私は苦労し始めていますが、私はそのポジションを編集したいときです。私は、すべてのコンポーネントが互いの上にあることを望んでいません。そのため、要素を配置する代わりに複数のxまたはy属性を編集する場合、すべてのコンポーネントがこのオフセットだけで移動するようにオフセットを計算します。ここでそれは大丈夫ではないです。もちろん、オフセットが設定されると、他のコンポーネントも更新され、新しい値が設定されるため、地獄のループに陥ります。

2つのビューとモデルがある場合、イベントの伝播を停止できるように、イベントを処理するパターンがわかっているかどうかを知りたいと思います。

scope.canvas.on('figureEdited', function (canvas, event) { 
     if (scope.selectedComponents.length > 1) { 
     var key = event.key; 
     var value = event.value; 
     var originComponent = event.origin; 
     for (var i = 0; i < scope.selectedComponents.length; i++) { 
      var selectedComponent = scope.selectedComponents[i]; 
      if (selectedComponent !== originComponent) { 
      if (key !== 'x' && key !== 'y') { 
       selectedComponent.setData(key, value); 
      } else { 
       var offset = value - event.oldValue; 
       selectedComponent.setData(key, selectedComponent.getData(key) + offset, true); 
      } 
      } 
     } 
     } 
    }); 

問題は、それがこのオフセットによって再びすべてのコンポーネントの動きを作り、figureEditedイベントを再トリガ

selectedComponent.setData(key, selectedComponent.getData(key) + offset, true); 

によって引き起こされる、無限（10ダイジェストによって停止：ここ

は私の伝播スニペットがあります反復）。

私はあなたの助けのためにたくさんの長いテキストと感謝のために申し訳ありませんが、これは明らかであると思います:)

Alann。

Answer 1

setData呼び出しによって新しいイベントが同期的にトリガーされた場合、ループ中にトリガーされたイベントは無視され、無視フラグを設定して関数の先頭でチェックすることができます。あなたは{ `するevent.stopPropagation（）` `scope.canvas.on後（ 'figureEdited'、機能（キャンバス、イベント）を書くこと

var ignoreEvent = false; 
scope.canvas.on('figureEdited', function (canvas, event) { 
    if (ignoreEvent) return; 
    ignoreEvent = true; 

    //... 

    ignoreEvent = false; 
});