在不重新呈现视图的情况下更新角度 JS 中的 URL

我在 AngularJS 中构建了一个仪表板系统，我遇到了一个通过 $location.path设置 URL 的问题

在我们的仪表板中，我们有一些小部件。每个都显示一个更大的最大化视图，当你点击它。我们正在尝试建立深度链接，以允许用户链接到一个仪表板与小部件最大化。

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

当用户最大化一个小部件时，我们使用 $location.path更新 URL，但这会导致视图重新呈现。因为我们拥有所有的数据，所以我们不想重新加载整个视图，我们只想更新 URL。有没有一种方法可以在不导致视图重新呈现的情况下设置 url？

HTML5Mode设置为 true。

80948 次浏览
小开

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

可能重复的问题: 在 AngularJS 中可以不重新加载控制器而更改路径吗？

问候

小开

对于类似的场景，我们使用 Angular UI 路由器而不是内置路由。它似乎没有重新实例化控制器并重新呈现整个视图。

小开
最佳答案

事实上，每次更改 URL 时都会呈现一个视图。这就是 $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
});
小开

如果我没理解错你的问题,

  1. 当用户在/dashboard/: dashboardId 上并且他最大化小部件时，最大化小部件。
  2. 您希望用户能够返回/dashboard/: dashboardId/: maxizedWidgetId，并且仍然可以看到最大化的小部件。

您只能在 routerConfig 中配置第一个路由，并使用 RouteParams来确定是否将最大化的小部件传递到这个配置路由的控制器中的参数中，并最大化作为参数传递的那个小部件。如果用户第一次将其最大化，那么在 UI 上使用 MaximizedWidgetId 共享这个最大化视图的 URL。

只要使用 $location (它只是本机位置对象的包装器)来更新路径，它就会刷新视图。

小开

我是如何实施的:
(我的解决方案主要针对需要改变整个路线的情况，而不是子部分)

我有一个带菜单的页面(menuPage) ，数据不应该在导航中被清理(每个页面上都有很多输入，如果数据意外消失，用户会非常不高兴)。

  1. 关闭路由提供程序

  2. 在 mainPage 控制器中添加两个带有自定义指令属性的 div-每个指令只包含‘ templateUrl’和‘ scope: true’

     <div ng-show="tab=='tab_name'" data-tab_name-page></div>

  3. mainPage controller contains lines to simulate routing:

    if (!$scope.tab && $location.path()) {
$scope.tab = $location.path().substr(1);
}
$scope.setTab = function(tab) {
$scope.tab = tab;
$location.path('/'+tab);
};

That's all. Little bit ugly to have separate directive for each page, but usage of dynamic templateUrl (as function) in directive provokes re-rendering of page (and loosing data of inputs).

小开

我有个好主意

ReplaceState (‘ Object’，‘ Title’,’/new-url’) ;

如果你这样做，并发生消化周期，它将完全混乱的东西。然而，如果你设置回正确的网址，角度期望它的确定。因此，理论上你可以存储正确的网址，角期望并重置它之前，你知道一个消化火灾。

我还没测试过。

小开

我知道这是个古老的问题，但是我花了一天半的时间才找到答案，所以我开始了。

如果使用 角度路由器角度路由器，则不需要将路径转换为查询字符串 。

目前，由于什么 可能被认为是一个错误，设置 reloadOnSearch: false的状态将导致能够更改路由，而无需重新加载视图。GitHub 用户 lmessinger 甚至非常友好地提供了一个演示。你可以从上面链接的他的评论中找到链接。

基本上你要做的就是:

  1. 使用 ui-router代替 ngRoute
  2. 在您的国家，声明与 reloadOnSearch: false您希望的

在我的应用程序中，我有一个类别列表视图，从中你可以得到另一个类别使用这样的状态:

$stateProvider.state('articles.list', {
url: '{categorySlug}',
templateUrl: 'partials/article-list.html',
controller: 'ArticleListCtrl',
reloadOnSearch: false
});

就是这样，希望这个能帮上忙！

小开

下面的代码可以让你改变网址而不需要重定向，比如: http://localhost/#/691?foo?bar?blabla

for(var i=0;i<=1000;i++) $routeProvider.when('/'+i, {templateUrl: "tabPages/"+i+".html",reloadOnSearch: false});

但是当您切换到 http://localhost/#/692时，您将被重定向。

小开

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

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

用法:

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

提交答案