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

发布时间：2020-12-17 09:07:13 所属栏目：安全来源：网络整理

导读：我在AngularJS构建仪表板系统，我遇到了一个问题，通过$ location.path设置url 在我们的仪表板中，我们有一些小部件。当您点击它时，每个显示更大的最大化视图。我们正在尝试设置深层链接，以允许用户链接到一个仪表板与最大化的小部件。目前，我们有2个路

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!