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