angularjs - 在 Angular JS 中更新 URL 而不重新渲染 View

Question

我正在 AngularJS 中构建仪表板系统，但在通过 $location.path 设置 url 时遇到了问题

在我们的仪表板中，我们有很多小部件。当您单击时，每个都会显示更大的最大化 View 。我们正在尝试设置深层链接，以允许用户链接到带有最大化小部件的仪表板。

目前，我们有 2 个路由，分别为 /dashboard/:dashboardId 和 /dashboard/:dashboardId/:maximizedWidgetId

当用户最大化小部件时，我们使用 $location.path 更新 url，但这会导致 View 重新渲染。由于我们拥有所有数据，因此我们不想重新加载整个 View ，我们只想更新 URL。有没有办法设置 url 而不导致 View 重新渲染？

HTML5Mode 设置为 true。

Answer 1

事实上，每次更改 url 时都会渲染一个 View 。这就是 $routeProvider 在 Angular 中的工作方式，但您可以将 maximizeWidgetId 作为查询字符串传递，这样不会重新渲染 View 。

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

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

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

地址栏中的 URL 将更改为 http://app.com/dashboard/1?maximizeWidgetId=1

您甚至可以观看 URL 中的搜索变化(从一个小部件到另一个小部件)

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