在 Angular 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.

目前，我们有 2 条类似于 /dashboard/:dashboardId 和 /dashboard/:dashboardId/:maximizedWidgetId

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

当用户最大化小部件时，我们使用 $location.path 更新 url，但这会导致视图重新呈现.由于我们拥有所有数据，我们不想重新加载整个视图，我们只想更新 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 设置为 true.

推荐答案

实际上，每次更改 url 时都会呈现一个视图.这就是 $routeProvider 在 Angular 中的工作方式，但您可以将 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});
});

当您单击小部件以最大化时:

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
});

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