it-swarm.com.de

So laden Sie die gesamte Seite mit AngularJS neu oder rendern sie neu

Nachdem ich die gesamte Seite basierend auf mehreren Benutzerkontexten gerendert und mehrere $http -Anfragen gestellt habe, möchte ich, dass der Benutzer in der Lage ist, den Kontext zu wechseln und alles erneut zu rendern (erneutes Senden aller $http -Anfragen usw.). Wenn ich den Benutzer nur an eine andere Stelle weiterleite, funktionieren die Dinge ordnungsgemäß:

$scope.on_impersonate_success = function(response) {
  //$window.location.reload(); // This cancels any current request
  $location.path('/'); // This works as expected, if path != current_path
};

$scope.impersonate = function(username) {
  return auth.impersonate(username)
    .then($scope.on_impersonate_success, $scope.on_auth_failed);
};

Wenn ich $window.location.reload() verwende, werden einige der $http Anforderungen auf auth.impersonate(username), die auf eine Antwort warten, abgebrochen, daher kann ich das nicht verwenden. Auch der Hack $location.path($location.path()) funktioniert nicht (nichts passiert).

Gibt es eine andere Möglichkeit, die Seite neu zu rendern, ohne alle Anforderungen erneut manuell auszustellen?

295
andersonvom

Damit der Datensatz angular zum erneuten Rendern der aktuellen Seite zwingt, können Sie Folgendes verwenden:

$route.reload();

Nach AngularJS Dokumentation :

Bewirkt, dass $ route service die aktuelle Route neu lädt, auch wenn sich $ location nicht geändert hat.

Infolgedessen erstellt ngView einen neuen Bereich und reaktiviert den Controller.

399
andersonvom

$route.reload() initialisiert die Controller neu, aber nicht die Dienste. Wenn Sie den gesamten Status Ihrer Anwendung zurücksetzen möchten, können Sie Folgendes verwenden:

$window.location.reload();

Dies ist eine Standard-DOM-Methode , auf die Sie zugreifen können, indem Sie den $ window -Dienst einfügen.

Wenn Sie sicherstellen möchten, dass die Seite vom Server erneut geladen wird, beispielsweise wenn Sie Django oder ein anderes Webframework verwenden und eine neue serverseitige Darstellung wünschen, übergeben Sie true als Parameter an reload, wie in the docs erklärt. Da dies eine Interaktion mit dem Server erfordert, ist dies langsamer. Führen Sie dies nur aus, wenn dies erforderlich ist

Winkel 2

Das oben Gesagte gilt für Angular 1. Ich verwende Angular 2 nicht. Es sieht so aus, als ob die Dienste dort unterschiedlich sind. Es gibt Router, Location und DOCUMENT. Ich habe dort keine unterschiedlichen Verhaltensweisen getestet

313
danza

Um die Seite für einen bestimmten Routenpfad neu zu laden: -

$location.path('/path1/path2');
$route.reload();
38
Kumar Sambhav

Wenn Sie eckiger UI-Router verwenden, ist dies die beste Lösung.

$scope.myLoadingFunction = function() {
    $state.reload();
};
28
Neha DP

Vielleicht haben Sie vergessen, "$ route" hinzuzufügen, wenn Sie die Abhängigkeiten Ihres Controllers deklarieren:

app.controller('NameCtrl', ['$scope','$route', function($scope,$route) {   
   // $route.reload(); Then this should work fine.
}]);

Verwenden Sie window.location.reload (), um alles neu zu laden. mit Angularjs

Sehen Sie sich das Arbeitsbeispiel an

HTML

<div ng-controller="MyCtrl">  
<button  ng-click="reloadPage();">Reset</button>
</div>

angleJS

var myApp = angular.module('myApp',[]);

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

http://jsfiddle.net/HB7LU/22324/

9
Vaibs

Vor Angular 2 (AngularJs)

Durch die Route

$route.reload();

Wenn Sie die gesamte Anwendung neu laden möchten

$window.location.reload();

Winkel 2 +

import { Location } from '@angular/common';

constructor(private location: Location) {}

ngOnInit() {  }

load() {
    this.location.reload()
}

Oder

constructor(private location: Location) {}

ngOnInit() {  }

Methods (){
    this.ngOnInit();
}
6
Thilina Sampath

Wenn Sie den Controller aktualisieren möchten, während Sie die von Ihnen verwendeten Dienste aktualisieren, können Sie die folgende Lösung verwenden:

  • $ state injizieren

d.h.

app.controller('myCtrl',['$scope','MyService','$state', function($scope,MyService,$state) {

    //At the point where you want to refresh the controller including MyServices

    $state.reload();

    //OR:

    $state.go($state.current, {}, {reload: true});
}

Dadurch werden der Controller und der HTML-Code aktualisiert, den Sie auch aufrufen können Aktualisieren oder erneutes Rendern.

6
Saurabh Sarathe

Die einfachste Lösung, die ich mir vorgestellt habe, war:

füge '/' zu der Route hinzu, die jedes Mal neu geladen werden soll, wenn du zurückkommst.

z.B:

anstelle der folgenden

$routeProvider
  .when('/About', {
    templateUrl: 'about.html',
    controller: 'AboutCtrl'
  })

verwenden,

$routeProvider
  .when('/About/', { //notice the '/' at the end 
    templateUrl: 'about.html',
    controller: 'AboutCtrl'
  })
5
diyoda_

Ich habe diesen Arbeitscode zum Entfernen des Caches und zum Neuladen der Seite

Ansicht

        <a class="btn" ng-click="reload()">
            <i class="icon-reload"></i> 
        </a>

Controller

Injektoren: $ scope, $ state, $ stateParams, $ templateCache

       $scope.reload = function() { // To Reload anypage
            $templateCache.removeAll();     
            $state.transitionTo($state.current, $stateParams, { reload: true, inherit: true, notify: true });
        };
4
Ravi Mehta

Versuchen Sie eine der folgenden Möglichkeiten:

$route.reload(); // don't forget to inject $route in your controller
$window.location.reload();
location.reload();
4
Yamen Ashraf

Verwenden Sie den folgenden Code, ohne den Benutzer über das erneute Laden zu benachrichtigen. Die Seite wird gerendert

var currentPageTemplate = $route.current.templateUrl;
$templateCache.remove(currentPageTemplate);
$window.location.reload();
3
KARTHIKEYAN.A