$location service and URLs for links

Question

$location service and URLs for links

I have an Angular directive that shows paging links for search results. My current implementation for the page links is with events...

For example:

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

I want to change this to use the $location service so that the paging links operate as actual links... i.e. an anchor with href attribute and all the usual behavior.

So the HTML would look something like this:

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

My problem is how to handle the case where there is already a URL search value that the directive doesn't care about, and cannot affect.

For example, if the URL is /search?customerId=23&pageIndex=1, the URL for page 2 needs to be /search?customerId=23&pageIndex=2. But the directive doesn't know or care about customerId...

Doing this in code would look something like:

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

But since I am using anchors, I need to know what the URL to put into the HREF will be.

Are there any options or solutions I am missing?

Essentially, I need to peek at the URL that would result from calling $location.search({pageIndex: 2})

angularjs

Answer 1

You will probably need to use a function for this. Something like:

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

If you go with this method, use it on ngClick rather than as an href.

Another option would be to stringify the url parameters. This would require a jQuery function:

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

Controller function:

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

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

You could also wrap it all up in a filter:

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 could then be:

<a ng-href="{{2 | pagingQueryString}}">Page 2</a>