AngularJs $ look at $ location.search does not work when reloadOnSearch is false

Question

My routeProvider for reloadOnSearch route is set to false :

$routeProvider .when( "/film/list", { templateUrl: '/film/list.html', controller: FilmListController, reloadOnSearch: false } .... ) 

I did this because I do not want the entire controller to restart after changing the query string, but I still use it and the URL looks like this: film/list?sort=isbn&order=asc&offset=0 . Now, when the query string changes, I want to call a function from my controller. So I tried setting up $ watch in the controller:

 $scope.location = $location; $scope.$watch( 'location.search()', function( search) { $scope.list(); }); 

But that does not work. If I set $ watch to view changes to a single query string parameter, then it works. But I do not want to set $ watch for each parameter of my query string. Now I use the following:

 $scope.location = $location; $scope.$watch( 'location.url()', function( url ) { if($location.path() == '/film/list') $scope.list(); }); 

Therefore, instead of looking for a search, I look at the entire URL and then check if the path is the one I set in routeProvider to conditionally call the function. What I don't like about this solution is that I have to explicilty enter the value for $ location.path to match.

Could someone suggest a better solution and maybe explain to me why $ watch does not work for $ location.search ()?

Answer 1

You can listen to the $routeUpdate event in your controller:

 $scope.$on('$routeUpdate', function(){ $scope.sort = $location.search().sort; $scope.order = $location.search().order; $scope.offset = $location.search().offset; }); 

Answer 2

If you do not use Angular route permission or just want to know when the $ location variable changes, there is an event for this purpose

 $rootScope.$on('$locationChangeSuccess', function(event){ var url = $location.url(), params = $location.search(); }) 

Answer 3

The response to the Stewies messages is correct, you must listen to the events of $routeUpdate for this, since it is more efficient.

But answer why your watch does not work; when you look at location.search() , you look if the link returned by the search method is the same or not. And it will return a link to the same object every time you call it, so your watch does not shoot. That is, even if the search parameters are changed, it is still the same object that is returned. To get around this, you can pass true as the third argument to $watch . This will tell Angular to compare by value, not by reference. But be careful when creating such watches, because they will consume more memory and take more time. So why do you have to do this, as stewie said.

Answer 4

Using

 $scope.$watch(function(){ return $location.search() }, function(params){ console.log(params); }); 

instead.

Answer 5

Watch for changes on routeUpdate , as it is in the controller:

  $scope.$watch('$routeUpdate', function(){ $scope.sort = $location.search().sort; $scope.order = $location.search().order; });