AngularJs $watch on $location.search doesn't work when reloadOnSearch is false

angularjs listener watch
MBozic picture MBozic · Feb 26, 2013 · Viewed 40.7k times · Source

My routeProvider for route has reloadOnSearch set to false :

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

  )

I did this because I don't want the whole controller to be reloaded after query string changes, but I still use it and the url looks like this: film/list?sort=isbn&order=asc&offset=0. Now whenever query string changes I want to call a function from my controller. So I tried to set up a $watch in the controller:

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

But this doesn't work. If I set $watch to watch changes of an individual parameter of a query string, then it works. But I don't want to set $watch for every parameter of my query string. The solution I use now is this:

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

So instead of watching for the search, I watch the whole url, and then I 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 type the value for $location.path to be matched.

Can anyone suggest a better solution, and perhaps explain me why is $watch not working for $location.search() ?

Answer

Le Duc Duy picture Le Duc Duy · May 16, 2013

In case you don't use Angular's route resolution or you just want to know whenever $location changes, there is an event just for that purpose

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

Related questions

Angular JS $watch vs $on

I want to execute a function inside a directive, whenever there is a state change in the parent scope. The obvious way to achieve this is to use event broadcasts ($broadcast) and listeners ($on). I am curious if using a $…

Read More
if else statement in AngularJS templates

I want to do a condition in an AngularJS template. I fetch a video list from the Youtube API. Some of the videos are in 16:9 ratio and some are in 4:3 ratio. I want to make a condition like this: if …

Read More
How do I use $scope.$watch and $scope.$apply in AngularJS?

I don't understand how to use $scope.$watch and $scope.$apply. The official documentation isn't helpful. What I don't understand specifically: Are they connected to the DOM? How can I update DOM changes to the model? What is the connection …

Read More