AngularJS $location.path() not reloading data of the destination view

Question

In my angular project, when changing the path with $location.path('/foobar') the destination view is displayed but the data aren't reloaded (typically after saving an item and going back to the list, the list is not updated).

I tried to add $route.reload() or $scope.apply(), but nothing change.

I don't know what's wrong or missing to make this work.

UPDATE

$location.url() doesnt' work either
I'm using angular 1.2.26

UPDATE 2 - ANSWER

Ok, after a lot of comments and answers, I think it's time to end this.
I didn't think it would have been a so complicated question.

So, my conclusion, giving all you said is :

Giving simple example of @yvesmancera, the default behavior of the controller is to reload itself
In a complex controller with a resource factory and some REST calls, any save or update action should also manually update the list reference, or trigger a full reload of the list

All of you gave me some good advices, so thank you.

Use $location.url('/foobar') instead. See stackoverflow.com/questions/24794115/… — csbarnes
– csbarnes, Commented Jun 25, 2015 at 18:25
nope, same problem with $location.url(), data aren't reloaded — Sylver
– Sylver, Commented Jun 25, 2015 at 18:36
I'm not sure to understand your question. afaik the controller is linked to the view, via the routeProvider, so i supposed it is called, else the view wouldn't have data, or did i miss something? — Sylver
– Sylver, Commented Jun 25, 2015 at 18:46
ng-model should handle a lot of this for you. Your save should commit your changes and update your model. Reloading the page is probably not needed. Chances are your data is loaded when your controller starts, and the controller simply maintains the old data since it never goes out of scope. — Roman K.
– Roman K., Commented Jun 26, 2015 at 14:02
@RomanK. that's what I meant! I didn't mean to reload the page, when I said refresh the list. You are right, the save method should update the model. Sylver, I could only post some pseudo code as I don't have idea about your implementation of data models, but I've tried explaining what I meant by refreshing the list fetch in my answer. — Sudhansu Choudhary
– Sudhansu Choudhary, Commented Jun 26, 2015 at 18:34

Community · Accepted Answer · 2020-06-20 09:12:55Z

8

Use $window.location.href. to reload the page. I just check on $location document:

Page reload navigation

The $location service allows you to change only the URL; it does not allow you to reload the page. When you need to change the URL and reload the page or navigate to a different page, please use a lower level API, $window.location.href.

Example:

$window.location.href = "/your/path/here";

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 10, 2016 at 2:04

Huy Nguyen

2,0703 gold badges28 silver badges38 bronze badges

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

1 Comment

Ross Over a year ago

There is a problem. Yes $window.location.href will reload the page only if path is different from the current one. In AngularJS usually path is not changed, but only the part after anchor (#). So if staying on /#/some-route-1, calling $window.location.href = "/#/some-route-2" will not trigger page reload.

yvesmancera · Accepted Answer · 2015-06-26 17:51:55Z

3

I had the same problem just yesterday, if you try to navigate to the same path you're already in, angular won't try to reload the view and controller. What fixed it for me is appending a "/" at the end of each route in $routeProvider, e.g:

$routeProvider
  .when('/', {
    templateUrl: 'views/home.html',
    controller: 'HomeCtrl'
  })
  .when('/About/', {
    templateUrl: 'views/about.html',
    controller: 'AboutCtrl'
  })
  .when('/Contact/', {
    templateUrl: 'views/contact.html',
    controller: 'ContactCtrl'
  })

Edit

Here is a working plunkr with angular 1.2.26

http://plnkr.co/edit/jkGKKCp0djN6Jvy2fIRd?p=preview

edited Jun 26, 2015 at 17:51

answered Jun 25, 2015 at 20:04

yvesmancera

2,9255 gold badges26 silver badges33 bronze badges

3 Comments

Sylver Over a year ago

I tried your solution, but it doesn't change anything for me. Maybe different angular version, i will update the post about that.

yvesmancera Over a year ago

I updated my answer and added a plunkr, I got it to work with Angular 1.2.26, hope it helps.

Sylver Over a year ago

Thanks for your example. In your solution you were mentioning to append a "/" at the end of the route to reload the controller, else it wouldn't reload. But if i'm trying your plunkr example with and without a "/" at the end of paths, it always works. So, giving this working simple example here, I suppose that's the default behavior, and something in my project is preventing it to happen. Sounds right?

Sudhansu Choudhary · Accepted Answer · 2015-06-26 23:07:32Z

2

Pseudo Code:-

    app.controller('myController', ['$scope', '$location','$http', 'ItemListService'
                    function($scope, $location, $http, ItemListService){
       $scope.data = function(){
       ItemListService.getAllItems(); //get all the items;
    };
        $scope.saveMethod = function(item){
       $scope.data = ItemListService.save(item); //this is the refresh part, return data through save method. Pull the latest data and bind it to the scope.
         $location.path('/fooView'); //dont think you even need this if you are entering data in a modal sorta thing, which on the same view. 
    }
    }]);

You service should look like,

app.service('ItemListService', function(){
    this.getAllItems = function(){
      //get the items from itemList
     //return all the items
   }

  this.save = function(item){
     //save the item in itemList
     //**return all items again, call getAllItems here too.
}
});

Hope this helps!!

edited Jun 26, 2015 at 23:07

answered Jun 26, 2015 at 18:31

Sudhansu Choudhary

3,3903 gold badges21 silver badges33 bronze badges

1 Comment

Sylver Over a year ago

This answer is the closest to what i decided to do, so i'm accepting it. But all other propositions are right too.

Milos Mosovsky · Accepted Answer · 2015-06-25 23:58:53Z

1

You can switch https://github.com/angular-ui/ui-router it has method $state.reload() which can re-initialize whole controller.

If you dont want to switch ther is problem that controller is still living but you can implement after save

$rootScope.$broadcast('data:updated', $scope.data);

then wrap method of loading data in controller to function and then you can push new data to existing list / or make ajax reload

$rootScope.$on('data:updated',function(listener,data) {
 $scope.data.push(data);
});

$rootScope.$on('data:updated',function()
{
   callAjax.then(function(data) {
     $scope.data = data;
   }
});

https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$on

answered Jun 25, 2015 at 23:58

Milos Mosovsky

3,0031 gold badge18 silver badges18 bronze badges

Comments

Shaohao · Accepted Answer · 2015-06-25 20:04:37Z

0

Try $scope.dataModel.$save(); $location.url('/foobar');
Another reason might solve the problem is: when you redirect to /foobar, the controller of foobar should have a AJAX call to your server to load the new data. And you should use angular factory to make your AJAX calls.
If it is still not working, can you give more information about the version of the angular you are using, as well as your backend framework and database.

answered Jun 25, 2015 at 20:04

Shaohao

3,5297 gold badges28 silver badges45 bronze badges

1 Comment

Sylver Over a year ago

The $location.url/path is triggered inside a $save(). I'm using angular $resource and using factory to define my model objects.

Yevhenii Bahmutskyi · Accepted Answer · 2017-07-05 13:29:20Z

0

$location.path("/login");
$timeout(() => $scope.$apply(), 1000);

works for me

answered Jul 5, 2017 at 13:29

Yevhenii Bahmutskyi

1,6613 gold badges22 silver badges39 bronze badges

Collectives™ on Stack Overflow

AngularJS $location.path() not reloading data of the destination view

6 Answers 6

1 Comment

3 Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

3 Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related