AngularJs: Recharger la page

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

Je veux recharger la page. Comment puis-je faire ceci?

Vous pouvez utiliser la reloadméthode du $routeservice. Injectez $routedans votre contrôleur puis créez une méthode reloadRoutesur votre $scope.

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

Ensuite, vous pouvez l'utiliser sur le lien comme ceci:

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

Cette méthode provoquera le rechargement de l'itinéraire actuel. Si vous souhaitez cependant effectuer une actualisation complète, vous pouvez injecter $windowet utiliser cela:

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

Edition ultérieure (ui-router):

Comme mentionné par JamesEddyEdwards et Dunc dans leurs réponses, si vous utilisez angular-ui / ui-router, vous pouvez utiliser la méthode suivante pour recharger l'état / la route en cours. Injectez simplement $stateau lieu de $routeet vous avez:

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

windowobjet est rendu disponible via le $windowservice pour des tests et des moqueries plus faciles , vous pouvez utiliser quelque chose comme:

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

Et :

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

En remarque, je ne pense pas que $ route.reload () recharge réellement la page, mais seulement la route .

 location.reload(); 

Fait l'affaire.

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

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

Pas besoin de routes ou de quoi que ce soit de vieux js

Similaire à la réponse d'Alexandrin, mais en utilisant $ state plutôt que $ route:

(D'après la réponse SO de JimTheDev ici .)

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

<a ng-click="reloadState()" ... 

Si vous utilisez Angulars ui-router plus avancé que je recommanderais sans hésiter, vous pouvez maintenant simplement utiliser:

$state.reload();

Ce qui fait essentiellement la même chose que la réponse de Dunc.

Ma solution pour éviter la boucle infinie était de créer un autre état ayant effectué la redirection:

$stateProvider.state('app.admin.main', {
    url: '/admin/main',
    authenticate: 'admin',
    controller: ($state, $window) => {
      $state.go('app.admin.overview').then(() => {
        $window.location.reload();
      });
    }
  });

Angulaire 2+

J'ai trouvé ceci en recherchant Angular 2+, voici donc le chemin:

$window.location.reload();

C'est assez facile à utiliser $route.reload()(n'oubliez pas d'injecter $ route dans votre contrôleur), mais à partir de votre exemple, vous pouvez simplement utiliser "href" au lieu de "ng-href":

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

Il vous suffit d'utiliser ng-href pour protéger l'utilisateur des liens non valides causés par un clic avant qu'Angular n'ait remplacé le contenu des balises {{}}.

Sur Angular 1.5 - après avoir essayé certaines des solutions ci-dessus voulant recharger uniquement les données sans actualisation complète de la page, j'ai eu des problèmes pour charger correctement les données. J'ai remarqué cependant que lorsque je vais sur une autre route et que je reviens au courant, tout fonctionne bien, mais quand je veux recharger uniquement la route actuelle en utilisant $route.reload(), alors une partie du code n'est pas exécutée correctement. Ensuite, j'ai essayé de rediriger vers l'itinéraire actuel de la manière suivante:

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

et dans la configuration du module, ajoutez-en un autre 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'
     });
}])

et cela fonctionne très bien pour moi. Il n'actualise pas la page entière, mais provoque uniquement le rechargement du contrôleur et du modèle actuels. Je sais que c'est un peu piraté, mais c'est la seule solution que j'ai trouvée.

<a title="Pending Employee Approvals" href="" ng-click="viewPendingApprovals(1)">
                    <i class="fa fa-user" aria-hidden="true"></i>
                    <span class="button_badge">{{pendingEmployeeApprovalCount}}</span>
                </a>

et dans le contrôleur

 $scope.viewPendingApprovals = function(type) {
                if (window.location.hash.substring(window.location.hash.lastIndexOf('/') + 1, window.location.hash.length) == type) {
                    location.reload();
                } else {
                    $state.go("home.pendingApproval", { id: sessionStorage.typeToLoad });
                }
            };

et dans le fichier d'itinéraire

.state('home.pendingApproval', {
        url: '/pendingApproval/:id',
        templateUrl: 'app/components/approvals/pendingApprovalList.html',
        controller: 'pendingApprovalListController'
    })

Donc, si l'id passé dans l'url est le même que ce qui vient de la fonction appelée en cliquant sur l'ancre, alors rechargez simplement, sinon suivez l'itinéraire demandé.

S'il vous plaît, aidez-moi à améliorer cette réponse, si cela vous aide. Toutes les suggestions sont les bienvenues.

Cela peut être fait en appelant la méthode reload () de l'objet window en JavaScript brut

window.location.reload();

Je suggérerais de renvoyer la page. Suggestion officielle

https://docs.angularjs.org/guide/$location

Cela peut être fait en appelant la méthode reload () en JavaScript.

location.reload();