Last Updated: October 12, 2017
· guangyi

AngularJS study note: $watch() current URL

I want to use $watch() function to get the current URL, when it changes, do something.

But at first when the URL changes, nothing happened. I used to write it this way, which is WRONG:

$scope.$watch('$location.path()', function(value){

This is wrong because,

$scope.$watch(watchExpression, callbackFunction);

"The first parameter of the $watch method (the “watchExpression”) can be either an Angular string expression (that is evaluated against the $scope), or a function, which is called with $scope as the first parameter. “ I found this explanation from<a href="http://stackoverflow.com/questions/14932119/why-angular-js-parameter-of-a-watch-function-should-be-a-scope-variable"> stackoverflow</a>

It also gives an <a href="http://jsfiddle.net/vojtajina/w39eL/">great example to illustrate</a>

After reading it, I change my code to this:

    return $location.path();
}, function(value){

It works! Every time I click a link that changes the URL, console print the URL out.

4 Responses
Add your response


Angular also has
Which can be used to watch $route or $location.

$rootScope.$on("$locationChangeStart", function() {
    // This will run on every location change, before the
    // whole route is processed. Good for things like Identity
    // management.

Thanks for the tip!

over 1 year ago ·

I checked the example, but both ways work for me, whats suppose to happen?

over 1 year ago ·

Thank you, ktstowell!
I just started learning AngularJS, so it's really good to know!

over 1 year ago ·

Hi neeph,
I test it in Chrome, and if I use the first way, "value" in function(value) is undefined. But in the second way, it can return the current URL correctly.

over 1 year ago ·