angularjs url with querystring messing up back button?

365 views Asked by At

My angular app shows a listing of jobs with refinement filters on the left sidebar and paging navigation at the bottom. One of the requirements is that the user should be able to copy the url to share so I can't use some controller method with an ng-click on each sidebar filter or page number to change the list of jobs. I had to basically create a url structure like

localhost/home#/jobs/page/1/pageSize/5?keyword=test&location=44746...

This works however, when I click a job in the list it is set to go to

localhost/home#/detail/10 and that works fine. The problem is when I then click the back button it takes me to

localhost/home#/detail/10?keyword=test&location=44746...

instead of

localhost/home#/jobs/page/1/pageSize/5?keyword=test&location=44746...

If I hit the back button again, it goes back to

localhost/home#/jobs/page/1/pageSize/5?keyword=test&location=44746...

So, is there something with using querystring parameters in angular that's causing this? I didn't have this problem before I implemented the querystring url but I have no idea why it would do this or what to change.

Here's the controller code that is called when a filter is clicked to rerun a search.

$scope.getJobs = function () {
    var url = '/jobs/page/' + $scope.page +
            '/pageSize/' + $scope.pageSize +
            '/?keyword=' + encodeURI($scope.search.keyword) +
            '&location=' + encodeURI($scope.search.location) +
            '&locationString=' + encodeURI($scope.search.locationString) +
            '&salary=' + encodeURI($scope.search.salary) +
            '&positionTitle=' + encodeURI($scope.search.title) +
            '&jobType=' + encodeURI($scope.search.jobType) +
            '&includeRemote=' + $scope.search.includeRemote;
    $location.url(url);
};

And then the controller method for when they click a job title to get to the detail page.

$scope.viewJob = function (id) {
    $location.path('detail/' + id);
};
0

There are 0 answers