6

我已经在一个大型 Angular 应用程序上工作了将近一年，我一直在努力做我认为微不足道的事情。

这是我使用参数的两条路线（为简洁起见而缩短）：

/a/:id
/a/:id/b

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

/#/a/1?foo=123&bar=456

我想在页面上有一个链接，将用户定向到第二条路线/a/1/b，同时维护查询字符串，因此最终结果是重定向到：

/#/a/1/b?foo=123&bar=456

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

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

编辑： 我应该提到我现在有一个可行的解决方案，这对我来说似乎很糟糕。该链接绑定到一个ng-click处理程序，该处理程序基本上如下：

$scope.navigateToBClick = function() {
  var path = $location.path() + '/b',
    search = $location.search();
  $location.url(path + '?' + $.param(search));
};
4

6 回答 6

5

我不确定您是否会认为这是一个比现有解决方案更好的解决方案，但它是一个解决方案。

在您的初始化代码中，添加以下内容：

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

然后，在您的 HTML 中，使您的链接如下：

<a ng-href="#/a/{{id}}/b?{{query}}">Navigate to B</a>
于 2014-02-12T16:46:23.143 回答
1

如果我正确理解了这个问题，那么我们可以使用$locationChangeStart $rootScope 事件来解决它。这是在运行阶段完成的。基本思想是：在每次位置更改时，我们将检查 url 中是否有查询字符串（在 url 中搜索“？”，如果有查询字符串，则将其添加到新 url。

    angular.module('your_module').run(function ($rootScope) {
      $rootScope.$on('$locationChangeStart', function (event, newUrl, oldUrl) {

      // If we have queryString on currentURL , then we will add it to the next url
        if(oldUrl.indexOf('?') >= 0) {
         // this can be optimized if we want to check first for queryString in the new url,
         // then append only new params, but that's additional feature.
        newUrl += '?' + oldUrl.split('?')[1];
      }
   });

在 HTML 中，我们只需调用$location.path('a/1/b')，就会自动添加 url 参数（查询字符串）。

于 2014-02-12T22:50:16.167 回答
0

//控制器

$scope.menu = {path:"admin", name: "Administration"};
var queryString = $location.$$url.split("?")[1];
if (queryString) {
    $scope.queryString = "?" + queryString;
}

//看法

<a ng-href="#/{{menu.path}}{{queryString}}">{{menu.name}}</a>
于 2014-10-23T06:33:55.830 回答
0

到目前为止，我发现的另一个解决方案是在每次搜索更改后跟踪所有$location.search()更改并存储$window.location.search在范围变量中。

然后只需将此范围变量添加到模板中的所有锚点：

<a ng-href="/projects/{{ projectId }}{{ queryString }}">
    Title
</a>

在这种情况下，两个路由都从 routeParams 查询字符串中读取范围变量，并$scope.$watch在这些变量上使用以反映相应的变化，$location.search从而反映锚href属性的变化。

于 2014-02-12T23:54:04.810 回答
0

如果路由是 /#/a/1?foo=123&bar=456 则重定向到 /#/a/1/b?foo=123&bar=456

我在 /#a?foo=bar 到 /#b?foo=bar 上工作过，它可以很容易地调整到 /#a/b?foo=bar 并使用 angular-route-segment 库。

在http://run.plnkr.co/HvSyw4aMUiy1mwC3/#/firstRoute?foo=bar运行 plunker

并在此处查看代码

http://plnkr.co/edit/ylFM8BHRXpqpMV7QVEcJ

请让我知道它是否有效。

于 2014-02-12T19:54:59.667 回答
0

这是我使用的导致持久查询字符串传播（我不想要的）的解决方案。

el.find('li').has('ul').on('click', 'a', function (e) {
    // handle clicks manually
    e.stopPropagation();
    // if the anchor tag has a specific class
    if (el.hasClass('link')) {
        var path = el.attr('href').replace('#', '');
        scope.$apply(function () {
            // changing the path changes only the path
            // the query string is left intact
            $location.path(path);
        });
    }
});
于 2014-10-28T22:01:35.527 回答