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

【问题标题】：How to prevent view redraw when changing route in AngularJS在AngularJS中更改路由时如何防止视图重绘
【发布时间】：2014-03-05 20:10:21
【问题描述】：

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

类似：

/地图
/tree/{treeid}
/tree/{treeid}/information/{informationid}

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

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

我的问题是，是否有更好、更合适的 Angular 方法？

提前致谢。

【问题讨论】：

标签： javascript angularjs angular-routing angularjs-view

【解决方案1】：

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

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

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

【讨论】：

这是个好主意，我没想到。它确实解决了问题，而无需做一些“肮脏”的解决方案。也感谢您提供的好例子！
我建议您将问题的标题更改为“如何在 AngularJS 中更改路线时防止 Google 地图重绘”

【解决方案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;
    ...
]);

【讨论】：

但这只会让我保持模型状态，而不是视图的实际渲染状态，对吧？无论模型是否准备就绪，要渲染（例如）具有数千个标记的自定义谷歌地图，以正确的位置为中心都需要一些时间。因此，与其在路线更改时从 ng-view 中删除内容，不如将其隐藏起来，或者这是不好的做法还是不可能？
你是对的，它只会保留模型。对于视图的渲染状态，您可以尝试使用 angular.element 将其与其父级分离，并在离开视图之前将其附加到 ngview 外部的 dom 点，然后在进入视图时将其重新附加到 ngview 内容.这是一个疯狂的猜测，我不知道对 Angular 内部的影响。
感谢您的意见。我已经接受了 marcoseu 的回答，因为它以简单的方式解决了问题，并且对系统的其余部分没有产生不良影响。

【解决方案3】：

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

【讨论】：

很好的阅读，但并没有真正绑定到保持元素呈现状态的主题。不过谢谢！