AngularJs changing $location.path does not work

Question

I realise that this problem has been presented before. But none of the answers appear to solve this problem.

I have a moderate knowledge of Angular and have produced quite a lot of angular code, I'm not a complete beginner.

I have started working on a MEAN app, so all the client side is Angular. And after two days of banging my head on the wall, I can't get a perfectly simple location.path(newPath) to work in a function in the $scope of a controller.

'use strict';

angular.module('core').controller('HeaderController', 
        [   '$scope', 
            '$location',
function($scope, $location) {


    //THIS LINE OF CODE, ON ARRIVAL IN THE CONTROLLER, WORKS
    //- it changes the path no problem.
    //$location.path('/it/vino/chianti/ChiantiClassico');   


    //But trying to set $location.path() DOES NOT WORK IN THE
    //FOLLOWING FUNCTION.
    //This function is called correctly from an ng-click event on a link. 
    //Therefore there should be no need to call apply(). 
    //However I have also tried both $apply and $timeout.

    $scope.changeLanguage = function(lang){

        //Right, let's try setting the path..
        $location.path('/it/vino/chianti/ChiantiClassico');

        //now we log $location.path() in the console and it 
        //gives the correct answer, which is:
        //'/it/vino/chianti/ChiantiClassico',
        //(but the path does not actually change in the browser address bar).
        console.log('$location.path():', $location.path()); //correct!

        //But if I also log the location object and I look inside, 
        //the path hasn't changed there !
        console.log('$location:', $location); //The path is the old one!

        //And the address bar has not changed
    };


}//end function

]);

I have debugged and scoured the objects looking for another $location object or some other mistake. - But there is only one $location object - found in the 'closure' section of the stack.

I can't see any kind of callback mistake here, I'm not trying to use an object that hasn't yet been defined or something like that.

Here is the calling link code from the view for completeness, nothing strange here, I've tried calling from buttons as well, the function is called correctly:

<a href="javascript:;" data-ng-click="changeLanguage('it')">italiano</a>

No, I put it there just to try $timeout. There is no code there that now uses it. I'll edit and remove it. — mwarren
– mwarren, Commented Dec 14, 2014 at 16:43
Did you ever get anywhere with this? I'm having a similar issue. Except any redirect takes me back to my root path! :/ — AR.
– AR., Commented Apr 1, 2015 at 0:21

AR. · Accepted Answer · 2015-04-07 22:11:59Z

1

I struggled for a while with the same issue. The problem was updating the URL with the ID of a newly created object (ID was generated by the DB and retrieved as part of the save process).

What worked well for me was simply:

$window.location.assign(newURL);

answered Apr 7, 2015 at 22:11

AR.

40.4k9 gold badges48 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mwarren Over a year ago

Well I can't quite give you the answer, but +1 as it's an interesting solution for people in a similar predicament

Thierry · Accepted Answer · 2014-12-14 16:36:29Z

0

May be your problem is that click on tag a make some navigation...

Not a 'true' answer, but some ways to explore:

try to remove the javascript in href
replace 'a' by 'button'
ng-click="changeLanguage('it,$event)" and in changeLanguage function: event.preventDefault() (or some stopPropagation)

Hope it can help..

answered Dec 14, 2014 at 16:36

Thierry

5,2533 gold badges27 silver badges30 bronze badges

1 Comment

mwarren Over a year ago

Thanks Thierry, but I'm sure that's not the problem. That code is ok. You can change the calling code to: <input type="button" value="English" data-ng-click="changeLanguage('en')"/>, it makes no difference.

zhou jing · Accepted Answer · 2015-07-20 14:06:01Z

0

I meet same problem, finally, I use this code: $window.location = '/#/path/to/xx' :

answered Jul 20, 2015 at 14:06

zhou jing

11 bronze badge

Collectives™ on Stack Overflow

AngularJs changing $location.path does not work

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related