Каков угловой способ обработки перерисовки?

Question

Я делаю графическое приложение, которое позволяет создавать графики с помощью интерфейса перетаскивания.

У меня есть диаграммы, и я использую директиву highcharts-ng.

Эта директива рассматривает название, варианты и серию. И когда человек вносит изменения, я обрабатываю их и вношу изменения в объект options. Затем highcharts-ng перерисовывает диаграмму.

Проблема заключается в том, что я изменяю несколько свойств в ряду, таких как options.xAxis и options.yAxis, и всякий раз, когда я это делаю, приложение немного отстает, потому что оно запускает перерисовку для каждого изменения.

Итак, какой бы угловой способ приблизиться к этому, хотя он все еще эффективен?

Потенциальное решение, о котором я думал, заключалось в том, чтобы добавить флаг в директиву highcharts-ng и вызвать его при каждом изменении. А потом просто измените его после того, как я закончил обработку данных. Другим потенциальным решением является прослушивание определенного события внутри директивы highchart-ng, а затем инициирование перерисовки всякий раз, когда это событие получено. Но эти решения кажутся мне немного неудобными.

Answer 1

Угловая делает свою собственную грязную проверку и (идеально всегда, но не на самом деле) перезаписывает секции DOM с угловым управлением, когда их соответствующие модели обзора меняются. Я думаю, что это поведение настолько фундаментально для Angular, что если вам это не нравится, вы бы лучше обошли его или использовали другую структуру привязки данных.

Обходной путь, который я рекомендую, - это в основном то, что вы описали в своем первом варианте: модель просмотра внутри модели представления. Имейте частную переменную внутри области действия директивы, которая отслеживает изменения, которые вас интересуют, те, которые происходят чаще, чем вы хотите перерисовать. Затем, когда вы будете готовы перерисовать (вам понадобится ваша собственная логика для того, что определяет «готовое» ... время? Конкретный вид изменений - определенный порог изменения?), Обновите модель реального вида, установив свой частный переменная возвращается к исходному полю в реальной модели представления.

код эскиз:

// (inside the directive) 

var _options = $scope.options; 

// ... 
// rapidfire updates happen; save them to _options rather than $scope.options 

// ... 
// now you're ready to redraw: 

$scope.options = _options; // angular now knows $scope is dirty and triggers the redraw