angularjs – 在Angular JS中更新URL而不重新渲染视图

前端之家收集整理的这篇文章主要介绍了angularjs – 在Angular JS中更新URL而不重新渲染视图前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在AngularJS构建仪表板系统,我遇到了一个问题,通过$ location.path设置url

在我们的仪表板中,我们有一些小部件。当您点击它时,每个显示更大的最大化视图。我们正在尝试设置深层链接,以允许用户链接到一个仪表板与最大化的小部件。

目前,我们有2个路径,看起来像/ dashboard /:dashboardId和/ dashboard /:dashboardId /:maximizedWidgetId

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

HTML5Mode设置为true。

实际上,每次更改网址时都会显示一个视图。这是$ 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);

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

您甚至可以观察网址中的搜索更改(从一个窗口小部件到另一个窗口小部件)

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

猜你在找的Angularjs相关文章