Angular $location change path works second time, not first time

Question

The code seems simple, but as I read the docs for $location, I notice there's a LOT of complexity I don't understand. My setup is as follows:

// in app.js
$routeProvider.when('/done'     , {templateUrl: 'partials/done.html', controller: 'DoneController'});

// in my controller where $location is injected, on a button press...
if (!$scope.errors.length) {
    $scope.model.save().then(function() {
        alert("did I get here?");
        $location.path('/done');
    });
}

I press the button and see the alert, but no change in view. I press the button a second time (saving data to the cloud a second time), I see the alert a second time and the view does change. Any ideas why? Thanks in advance.

Is there a 'resolve' in your controller ? Also, what if you wrap the $location.path('/done') in a $scope.$apply ? — AlexHv, Oct 30 '14 at 17:38
@AlexHv - no resolve, but wrapping in $apply worked. Any idea why? Can you post that as an answer? — user1272965, Oct 30 '14 at 19:18
Possible duplicate of [AngularJS $location not changing the path](http://stackoverflow.com/questions/11784656/angularjs-location-not-changing-the-path) — T J, Dec 19 '15 at 10:41

score 5 · Accepted Answer · edited Dec 19 '15 at 10:39

5

I believe there must be something asynchronous in your sequence. It generally happens when using an external libraries like jQuery.

The problem is that the $watch -> $digest -> $apply cycle of angular is not triggered with external libraries events. So the change has been made, but not propagated by angularjs.

Using $scope.$apply() will solve your problem

if (!$scope.errors.length) {
    $scope.model.save().then(function() {
        alert("did I get here?");
        $scope.$apply(function(){
          $location.path('/done');
        });
    });
}

edited Dec 19 '15 at 10:39

T J

42,762
13
83
138

answered Oct 31 '14 at 09:18

AlexHv

1,694
14
21

I agree that $scope.$apply is the way to go when asynchronous events get generated out of the Angular framework, which I'm sure is the case with his call to $scope.model.save(). But $timeout is part of the Angular framework, you shouldn't be using $scope.$apply within a $timeout callback. That's the point of $timeout I guess. – zrz Oct 31 '14 at 10:34
Dude you're absolutely right, sorry for this. I correct. – AlexHv Oct 31 '14 at 12:47
On the other hand, you could illustrate with setTimeout() which is the most basic call being both async AND out the framework. – zrz Oct 31 '14 at 12:53
Yeah I mixed up those two I guess ! Thanks for the precision :-) – AlexHv Oct 31 '14 at 13:27
Thanks. My model.save() ultimately calls parse.com, fitting your theory about being outside the framework. I thought I had parse apis wrapped in angular promises via a project I found on github, but investigating now, I see that code is not running. Thanks for the tips (thanks also @zrz). – user1272965 Oct 31 '14 at 15:43

score -1 · Answer 2 · answered Oct 30 '14 at 17:42

-1

i am not sure why? but this may be your html problem.if your html like this:

<a href="#" class="btn" ng-click="myFunction()">submit here</a>

then do href="" means code should be like this:

<a href="" class="btn" ng-click="myFunction()">submit here</a>

answered Oct 30 '14 at 17:42

Mukund Kumar

21,413
18
59
79

Angular $location change path works second time, not first time

2 Answers2