在不重新渲染视图的情况下更新Angular JS中的URL

Question

我正在AngularJS中构建一个仪表板系统,我遇到了设置url via的问题 $location.path

在我们的仪表板中,我们有一堆小部件.单击它们时,每个都显示更大的最大化视图.我们正在尝试设置深层链接,以允许用户链接到最大化窗口小部件的仪表板.

目前,我们有两条看似/dashboard/:dashboardId和的路线/dashboard/:dashboardId/:maximizedWidgetId

当用户最大化窗口小部件时,我们使用更新URL $location.path,但这会导致视图重新呈现.由于我们拥有所有数据,因此我们不想重新加载整个视图,我们只想更新URL.有没有办法设置网址而不会导致视图重新渲染？

HTML5Mode设置为true.

Answer 1

实际上,每次更改网址时都会呈现视图.这是$ routeProvider如何在Angular中工作,但你可以maximizeWidgetId作为查询字符串传递,不会重新渲染视图.

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

Answer 2

您可以将$ routeProvider的reloadOnSearch属性设置为false.

可能重复的问题:您是否可以在不重新加载AngularJS中的控制器的情况下更改路径？

问候

Answer 3

对于那些需要更改完整路径()而没有控制器重新加载的人

这是插件:https://github.com/anglibs/angular-location-update

用法:

$location.update_path('/notes/1');