AngularJs: Recharger la page

PORTAL_NAME 

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

Vous pouvez utiliser la méthode de 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:

 PORTAL_NAME 

Cette méthode provoquera le rechargement de l’itinéraire actuel. Si toutefois vous souhaitez effectuer une régénération complète, vous pouvez injecter $window et l’utiliser:

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

Éditer plus tard (ui-router):

Comme mentionné par JamesEddyEdwards et Dunc dans leurs réponses, si vous utilisez un routeur / interface utilisateur angular, vous pouvez utiliser la méthode suivante pour recharger l’état / l’itinéraire actuel. Il suffit d’injecter $state au lieu de $route et vous avez alors:

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

window object window est disponible via le service $window pour faciliter les tests et les moqueries , vous pouvez utiliser quelque chose comme:

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

Et :

 PORTAL_NAME 

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

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

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

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

Fait le tour

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

Pas besoin de routes ou de tout simplement js vieux

Si vous utilisez un ui-routeur plus avancé que je recommande, vous pouvez maintenant utiliser simplement:

 $state.reload(); 

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

Ma solution pour éviter la boucle infinie consistait à créer un autre état ayant fait la redirection:

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

Il est assez simple d’utiliser simplement $route.reload() (n’oubliez pas d’injecter $ route dans votre contrôleur), mais dans votre exemple, vous pouvez simplement utiliser “href” au lieu de “ng-href”:

 PORTAL_NAME 

Vous devez uniquement utiliser ng-href pour protéger l’utilisateur des liens non valides provoqués par un clic avant qu’Angular ait remplacé le contenu des balises {{}}.

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

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

et dans le module config, 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 ça marche très bien pour moi. Il ne rafraîchit pas la page entière, mais ne fait que recharger le contrôleur et le modèle actuels. Je sais que c’est un peu piraté, mais c’était la seule solution que j’ai trouvée.

   {{pendingEmployeeApprovalCount}}  

et dans le contrôleur

  $scope.viewPendingApprovals = function(type) { if (window.location.hash.subssortingng(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 transmis dans l’url est le même que celui provenant de la fonction appelée en cliquant sur l’ancre, il suffit de recharger, sinon suivre 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.