1

我有一个 Angular 指令，它显示搜索结果的分页链接。我当前对页面链接的实现是事件......

例如：

$scope.goToNextPage = function() {
  if ($scope.pageIndex < $scope.maxPage()) {
    $scope.pageIndex = $scope.pageIndex + 1;
  }
};

我想将其更改为使用 $location 服务，以便分页链接作为实际链接运行......即具有 href 属性和所有常见行为的锚点。

所以 HTML 看起来像这样：

<a href="?pageIndex=2">Page 2</a>

我的问题是如何处理已经存在指令不关心且无法影响的 URL 搜索值的情况。

例如，如果 URL 是/search?customerId=23&pageIndex=1，则第 2 页的 URL 需要是/search?customerId=23&pageIndex=2。但是该指令不知道也不关心 customerId ...

在代码中执行此操作看起来像：

$location.search({pageIndex: 2});

但由于我使用的是锚点，我需要知道要放入 HREF 的 URL 是什么。

我缺少任何选项或解决方案吗？

本质上，我需要查看调用会产生的 URL $location.search({pageIndex: 2})

4

1 回答 1

0

您可能需要为此使用一个函数。就像是：

$scope.goToPage = function (pageNum) {
    $location.search({pageIndex: pageNum});
}

如果您使用此方法，请在 ngClick 上使用它而不是作为 href。

另一种选择是对 url 参数进行字符串化。这将需要一个 jQuery 函数：

<a ng-href="?{{pagingQueryString(2)}}">Page 2</a>

控制器功能：

$scope.pagingQueryString = function (pageNum) {
    var queryObject = angular.extend($location.search(), {pageIndex: pageNum});

    // jquery function to stringify the object to url
    return $.param(queryObject);
}

您也可以将其全部包装在过滤器中：

app.filter('pagingQueryString', function ($location) {
    return function (pageNum) {
        var queryObject = angular.extend({}, $location.search(), {pageIndex: pageNum});

        // jquery function to stringify the object to url
        return '?' + $.param(queryObject);
    }
}

HTML 可以是：

<a ng-href="{{2 | pagingQueryString}}">Page 2</a>
于 2013-03-12T12:54:36.763 回答