更新的角度JS URL无需重新渲染视图 [英] Updating URL in Angular JS without re-rendering view

问题描述

我建设AngularJS仪表盘系统和我遇到的问题通过 $ location.path

I'm building a dashboard system in AngularJS and I'm running into an issue with setting the url via $location.path

在我们的信息，我们有一堆小部件。每个显示一个更大的最大化视图，当你点击它。我们正试图建立深度链接，允许用户以最大化的窗口小部件链接到仪表板。

In our dashboard, we have a bunch of widgets. Each shows a larger maximized view when you click on it. We are trying to setup deep linking to allow users to link to a dashboard with a widget maximized.

目前，我们有两条路线，看起来像 /仪表板/：dashboardId 和 /仪表板/：dashboardId /：maximizedWidgetId

Currently, we have 2 routes that look like /dashboard/:dashboardId and /dashboard/:dashboardId/:maximizedWidgetId

当用户最大化的窗口小部件，我们更新使用 $ location.path 的网址，但是这是导致视图重新呈现。因为我们有所有的数据，我们不想重新加载整个视图，我们只是想更新的URL。有没有办法设置URL不会引起视图重新渲染？

When a user maximizes a widget, we update the url using $location.path, but this is causing the view to re-render. Since we have all of the data, we don't want to reload the whole view, we just want to update the URL. Is there a way to set the url without causing the view to re-render?

HTML5Mode 设置为真正。

推荐答案

在事实上，视图将呈现每次您更改URL。这就是$ routeProvider如何工作的角度，但你可以通过 maximizeWidgetId 作为查询字符串不重新渲染视图。

In fact, a view will be rendered everytime you change a url. Thats how $routeProvider works in Angular but you can pass maximizeWidgetId as a querystring which does not re-render a view.

App.config(function($routeProvider) {
  $routeProvider.when('/dashboard/:dashboardId', {reloadOnSearch: false});
});

当你点击一个widget最大化：

When you click a widget to maximize:

<a href="#/dashboard/1?maximizeWidgetId=1">Maximum This Widget</a>
or
$location.search('maximizeWidgetId', 1);

在地址栏的URL将变为 http://app.com/dashboard/1?maximizeWidgetId=1

The URL in addressbar would change to http://app.com/dashboard/1?maximizeWidgetId=1

您甚至可以观看时，在URL搜索改变（从一个小窗口到另一个）

You can even watch when search changes in the URL (from one widget to another)

$scope.$on('$routeUpdate', function(scope, next, current) {
   // Minimize the current widget and maximize the new one
});

这篇关于更新的角度JS URL无需重新渲染视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！