javascript - 在AngularJS中更改路由时如何防止视图重绘

Question

我正在制作一个网络应用程序，用户可以在其中查看地图上的对象，按下标记并转到包含信息的新视图。从这个角度来看，他们可以更深入地了解更多信息。

就像是：

• /地图
• /tree/{treeid}
• /tree/{treeid}/信息/{informationid}

我知道在路由/状态之间遍历时如何保持实际的模型状态。问题是当我返回浏览器历史记录时，我不想重新计算整个地图（带有标记和所有内容）。换句话说，我想在进一步遍历时保持 /map 的渲染状态。

这可以通过使用搜索参数而不是 /map 上的路由（即 /map?treeid=10）并禁用搜索时重新加载，并在地图对象上执行 ng-hide="treeid" 和在地图对象上执行 ng-show 来轻松实现树信息对象。

我的问题是，是否有更好、更合适的方式来做这件事？

提前致谢。

Answer 1

解决您的“重新计算整个地图”问题，解决此问题的一种方法是将 Google Map 绘制在与您相同的级别ng-view，并将其移出视图以隐藏它。

这是一个说明这将如何工作的 plunker：
http ://plnkr.co/edit/wsjYoG2uXxYxXTmWdFGh?p=preview

请注意，我在隐藏时故意将地图的一部分留在屏幕上，以表明它不会在您更改路线时重新绘制。

Answer 2

您可以创建一个专门的服务来存储数据。由于服务是单例的，因此数据将在您的视图和控制器之间共享。像这样的东西：

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;
    ...
]);

Answer 3

这看起来很有用：AngularJS Performance Tuning for Long Lists。它详细介绍了在渲染大型/复杂数据结构时要避免的建议和陷阱。