Question

我有一个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搜索值的情况。

例如，如果网址为/search?customerId=23&pageIndex=1，则第2页的网址必须为/search?customerId=23&pageIndex=2。但该指令不知道或不关心customerId ......

在代码中执行此操作将类似于：

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

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

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

基本上，我需要查看在调用$location.search({pageIndex: 2})

所产生的网址上

Answer 1

您可能需要使用此功能。类似的东西：

$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>

$ location服务和链接的URL

1 个答案: