Join the Stack Overflow Community
Stack Overflow is a community of 6.3 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
<a ng-href="#" class="navbar-brand" title="home" data-translate>PORTAL_NAME</a>

I want to reload the page. How can I do this?

share|improve this question

You can use the reload method of the $route service. Inject $route in your controller and then create a method reloadRoute on your $scope.

$scope.reloadRoute = function() {
   $route.reload();
}

Then you can use it on the link like this:

<a ng-click="reloadRoute()" class="navbar-brand" title="home"  data-translate>PORTAL_NAME</a>

This method will cause the current route to reload. If you however want to perform a full refresh, you could inject $window and use that:

$scope.reloadRoute = function() {
   $window.location.reload();
}


Later edit (ui-router):

As mentioned by JamesEddyEdwards and Dunc in their answers, if you are using angular-ui/ui-router you can use the following method to reload the current state / route. Just inject $state instead of $route and then you have:

$scope.reloadRoute = function() {
    $state.reload();
};
share|improve this answer
1  
This is a good answer if you're desperate to Angularise the reload. – spikeheap Feb 19 '14 at 15:59
    
How can I change this behavior globally instead of adding an action to all links – OMGPOP Aug 16 '15 at 4:58
    
@OMGPOP What exactly do you mean by globally for all links? – Alexandrin Rus Aug 16 '15 at 22:49
    
i mean, for all links you need to do this. is it possible to config once for all links? – OMGPOP Aug 18 '15 at 3:42
    
@AlexandrinRus this give's me the following [$rootScope:infdig] 10 $digest() iterations reached. Aborting! – alphapilgrim Jan 29 at 18:10

window object is made available through $window service for easier testing and mocking, you can go with something like:

$scope.reloadPage = function(){$window.location.reload();}

And :

<a ng-click="reloadPage"  class="navbar-brand" title="home"  data-translate>PORTAL_NAME</a>

As a side note, i don't think $route.reload() actually reloads the page, but only the route.

share|improve this answer
2  
I recommend using $window instead of window. – Jeroen Jun 3 at 8:04
    
Thanks for your contribution. Would you explain us why ? – Florian F. Jun 3 at 17:47
1  
Yes, sorry. It's best explained by the $window docs, mainly it's because reloadPage would be (better) testable when it uses $window. – Jeroen Jun 3 at 17:56
1  
Thanks, updated accordingly – Florian F. Jun 3 at 17:57

Similar to Alexandrin's answer, but using $state rather than $route:

(From JimTheDev's SO answer here.)

$scope.reloadState = function() {
   $state.go($state.current, {}, {reload: true});
}

<a ng-click="reloadState()" ... 
share|improve this answer

If using Angulars more advanced ui-router which I'd definitely recommend then you can now simply use:

$state.reload();

Which is essentially doing the same as Dunc's answer.

share|improve this answer
 location.reload(); 

Does the trick.

<a ng-click="reload()">

$scope.reload = function()
{
   location.reload(); 
}

No need for routes or anything just plain old js

share|improve this answer
1  
love the simplicity! – Shawn de Wet Mar 7 at 4:17

It's easy enough to just use $route.reload() (don't forget to inject $route into your controller), but from your example you could just use "href" instead of "ng-href":

<a href=""  class="navbar-brand" title="home"  data-translate>PORTAL_NAME</a>

You only need to use ng-href to protect the user from invalid links caused by them clicking before Angular has replaced the contents of the {{ }} tags.

share|improve this answer
    
$route is part of ng.route.IRouteService?? – cracker Jun 23 at 10:25

On Angular 1.5 - after trying some of the above solutions wanting to reload only the data with no full page refresh, I had problems with loading the data properly. I noticed though, that when I go to another route and then I return back to the current, everything works fine, but when I want to only reload the current route using $route.reload(), then some of the code is not executed properly. Then I tried to redirect to the current route in the following way:

$scope.someFuncName = function () {
    //go to another route
    $location.path('/another-route');
};

and in the module config, add another when:

.config(['$routeProvider', function($routeProvider) {
     $routeProvider.when('/first-page', {
         templateUrl: '/first-template',
         controller: 'SomeCtrl'
     }).when('/another-route', {//this is the new "when"
         redirectTo: '/first-page'
     });
}])

and it works just fine for me. It does not refresh the whole page, but only causes the current controller and template to reload. I know it's a bit hacky, but that was the only solution I found.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.