ドラッグドロップ時の角度パフォーマンス：さまざまなターゲットとハイライト表示

Question

私のページのリストには、多くの個別アイテム（またはタイル）のリストがあります。ユーザーがリスト内の項目にファイルをドラッグすると、onDragEnterにハイライトクラスを条件付きで追加し、onDragLeaveでクラスを削除します。ハイライトクラスは基本的にアイテムの背景色を変更します。

$ scope。$ applyを使用しないと、強調表示はUIに反映される前に1秒かかりますので、$ scope内にハイライトをラッピングします。

ファイル間でファイルをすばやく移動すると、ダイジェストサイクルの数が多いため、パフォーマンスが実際には遅くなります（強調表示と非強調表示は非常に遅くなります）。どのようにパフォーマンスを向上させることができるかというアイディアは、同時にUIに反映されています。

$ scopeの代わりに$ scope。$ digest（）を使用しようとしましたが、$適用されますが、パフォーマンスに改善は見られませんでした。

私のコードは次のようになります場合は

function onDragEnter() { 
    $scope.$apply(function() { 
     $scope.highlight = true; // this controls if the highlight class is added to the item using ng-class 
    }); 
} 

function onDragLeave() { 
    $scope.$apply(function() { 
     $scope.highlight = false; 
    }); 
} 

Answer 1

これは$スコープを使用して、誰かを助け$ evalAsyncパフォーマンスが大幅に改善されました。

function onDragEnter() { 
    $scope.$evalAsync(function($scope) { 
     $scope.highlight = true; // this controls if the highlight class is added to the item using ng-class 
    }); 
} 

function onDragLeave() { 
    $scope.$evalAsync(function($scope) { 
     $scope.highlight = false; 
    }); 
}