Как предотвратить перерисовку вида при изменении маршрута в AngularJS

Question

Я создаю веб-приложение, в котором пользователи могут просматривать объекты на карте, нажимать маркер и переходить к новому виду с информацией. С этой точки зрения они могут проходить глубже, к большей информации.

Что-то вроде:

• /карта
• / Дерево / {treeid}
• / Дерево / {treeid} / Информация / {informationid}

Я знаю, как сохранить фактическое состояние модели при прохождении между маршрутами / состояниями. Проблема в том, что я не хочу пересчитывать всю карту (с маркерами и всем остальным), когда возвращаюсь в историю браузера. Другими словами, я хочу сохранить визуализированное состояние / map при дальнейшем прохождении.

Этого легко достичь, используя параметры поиска вместо маршрутов в / map (т. Е. / Map? Treeid=10) и отключив перезагрузку при поиске, а также выполнив ng-hide="treeid" для объекта карты и ng-show для древовидный объект

Мой вопрос, есть ли лучший, более подходящий способ сделать это в угловом?

Заранее спасибо.

Answer 1

В ответ на вопрос "Пересчитать всю карту" один из способов решения этой проблемы - нарисовать карту Google на том же уровне, что и ваш. ng-viewи сдвиньте его из поля зрения, чтобы скрыть.

Вот плункер, иллюстрирующий, как это будет работать:
http://plnkr.co/edit/wsjYoG2uXxYxXTmWdFGh?p=preview

Обратите внимание, как я намеренно оставил часть карты на экране, когда скрываюсь, чтобы показать, что она не перерисовывается при изменении маршрута.

Answer 2

Это выглядит как полезное чтение: AngularJS Performance Tuning для длинных списков. Он детализирует рекомендации и подводные камни, которых следует избегать при рендеринге больших / сложных структур данных.

Answer 3

Вы можете создать специальный сервис для хранения данных. Поскольку сервисы одноразовые, данные будут распределены между вашими представлениями и контроллерами. Что-то вроде этого:

angular.module('myApp').factory('GlobalService', [
    function() {
        var _this = this;
        _this._data = {
            user: window.user,
            authenticated: !! window.user
        };

        return _this._data;
    }
]); 


angular.module('myApp').controller('FooController',
    ['$scope', 'GlobalService',
    function ($scope, GlobalService) {
    $scope.global = GlobalService;
    $scope.global.bar = someData;
    ...
]);