使用AngularJS路由保留查询字符串

Ter*_*rry 6 angularjs

我已经在一个大型的Angular应用程序上工作了将近一年,而且我一直在努力做我想做的事情.

以下是我使用params的两条路线(为简洁而缩短):

/a/:id
/a/:id/b
Run Code Online (Sandbox Code Playgroud)

假设用户在,/a/1并且修改了查询字符串,例如:

/#/a/1?foo=123&bar=456
Run Code Online (Sandbox Code Playgroud)

我希望在页面上有一个链接,用于/a/1/b在保持查询字符串的同时将用户引导到第二条路由,因此最终结果是重定向到:

/#/a/1/b?foo=123&bar=456
Run Code Online (Sandbox Code Playgroud)

我正在使用Angular 1.2和新的ngRoute模块.

实现这种行为的最佳方法是什么?


编辑: 我应该提一下,我现在有一个工作解决方案对我来说似乎很糟糕.该链接绑定到一个ng-click处理程序,该处理程序基本上如下:

$scope.navigateToBClick = function() {
  var path = $location.path() + '/b',
    search = $location.search();
  $location.url(path + '?' + $.param(search));
};
Run Code Online (Sandbox Code Playgroud)

Luk*_*kas 5

我不确定你是否会认为这是一个比你所拥有的更好的解决方案,但它是一个解决方案.

在初始化代码中,添加以下内容:

app.run(["$rootScope", function ($rootScope) {
    $rootScope.$on("$routeChangeSuccess", function (e, current) {
        $rootScope.query = $.param(current.params);
    });
}]);
Run Code Online (Sandbox Code Playgroud)

然后,在您的HTML中,按如下方式创建链接:

<a ng-href="#/a/{{id}}/b?{{query}}">Navigate to B</a>
Run Code Online (Sandbox Code Playgroud)