web-dev-qa-db-fra.com

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?

angularjsangularjs-scope
130
user880386

Vous pouvez utiliser la méthode reload du service $route. Injectez $route dans votre contrôleur, puis créez une méthode reloadRoute sur 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 entraînera le rechargement de la route actuelle. Toutefois, si vous souhaitez effectuer une actualisation complète, vous pouvez injecter $window et l’utiliser:

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


Éditer plus tard (routeur ui):

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. Il suffit d’injecter $state au lieu de $route et vous obtenez:

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

L'objet window est rendu disponible par le biais du service $window pour tests et simulations plus simples , vous pouvez choisir entre:

$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 la page, mais niquement la route .

51
Florian F.
 location.reload();

Fait le tour.

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

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

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

18
user3806549

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

(De SO de JimTheDev _ réponse ici .)

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

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

Si vous utilisez des angulaires plus avancées i-router que je vous 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.

9
JamesEddyEdwards

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();
      });
    }
  });
2
Gucu112

Il est assez facile de simplement 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>

Vous devez uniquement utiliser ng-href pour protéger l'utilisateur des liens non valides générés par un clic avant que Angular ne remplace le contenu des balises {{}}.

1
spikeheap

Sur Angular 1.5 - après avoir essayé certaines des solutions ci-dessus, voulant ne recharger que les données sans actualisation complète de la page, des problèmes se sont posés lors du chargement des données. J'ai remarqué cependant que lorsque je vais sur une autre route puis que je reviens sur le courant, tout fonctionne correctement, mais lorsque je veux recharger uniquement la route actuelle à l'aide de $route.reload(), 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 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 hacky, mais c'était la seule solution que j'ai trouvée.

1
vivanov
<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 de route

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

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

Aidez-moi à améliorer cette réponse, si cela peut vous aider. Toutes les suggestions sont les bienvenues.

1
AMRESH PANDEY

angulaire 2 +

J'ai trouvé ceci en cherchant Angular 2+, alors voici le chemin:

window.location.reload();
0
Nitin Jadhav