AngularJs: Seite neu laden

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

Ich möchte die Seite neu laden. Wie kann ich das machen?

Sie können die reloadMethode des $routeDienstes verwenden. Injizieren Sie $routein Ihren Controller und erstellen Sie dann eine Methode reloadRouteauf Ihrem $scope.

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

Dann können Sie es auf dem Link wie folgt verwenden:

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

Diese Methode bewirkt, dass die aktuelle Route neu geladen wird. Wenn Sie jedoch eine vollständige Aktualisierung durchführen möchten, können Sie Folgendes injizieren $windowund verwenden:

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

Später bearbeiten (UI-Router):

Wie von JamesEddyEdwards und Dunc in ihren Antworten erwähnt, können Sie bei Verwendung eines Angular-UI / UI-Routers die folgende Methode verwenden, um den aktuellen Status / die aktuelle Route neu zu laden. Einfach spritzen $statestatt $routeund dann haben Sie:

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

windowObjekt wird durch $windowService zur Verfügung gestellt , um das Testen und Verspotten zu erleichtern . Sie können mit etwas wie:

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

Und :

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

Als Randnotiz denke ich nicht, dass $ route.reload () tatsächlich die Seite neu lädt, sondern nur die Route .

 location.reload(); 

Macht den Trick.

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

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

Keine Notwendigkeit für Routen oder irgendetwas einfach nur altes js

Ähnlich wie Alexandrins Antwort, jedoch mit $ state anstelle von $ route:

(Aus JimTheDevs SO-Antwort hier .)

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

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

Wenn Sie Angulars fortgeschritteneren UI -Router verwenden, den ich definitiv empfehlen würde, können Sie jetzt einfach Folgendes verwenden:

$state.reload();

Das ist im Wesentlichen dasselbe wie Duncs Antwort.

Meine Lösung, um die Endlosschleife zu vermeiden, bestand darin, einen anderen Status zu erstellen, der die Umleitung vorgenommen hat:

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

Winkel 2+

Ich habe dies bei der Suche nach Angular 2+ gefunden. Hier ist der Weg:

$window.location.reload();

Es ist einfach genug, nur zu verwenden $route.reload()(vergessen Sie nicht, $ route in Ihren Controller einzufügen), aber in Ihrem Beispiel könnten Sie einfach "href" anstelle von "ng-href" verwenden:

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

Sie müssen ng-href nur verwenden, um den Benutzer vor ungültigen Links zu schützen, die durch Klicken verursacht werden, bevor Angular den Inhalt der {{}} -Tags ersetzt hat.

Unter Angular 1.5 hatte ich Probleme mit dem ordnungsgemäßen Laden der Daten, nachdem ich einige der oben genannten Lösungen ausprobiert hatte, bei denen nur die Daten ohne vollständige Seitenaktualisierung neu geladen werden sollten. Ich habe jedoch festgestellt, dass alles gut funktioniert, wenn ich zu einer anderen Route gehe und dann zur aktuellen zurückkehre. Wenn ich jedoch nur die aktuelle Route mit neu laden möchte $route.reload(), wird ein Teil des Codes nicht ordnungsgemäß ausgeführt. Dann habe ich versucht, auf folgende Weise zur aktuellen Route umzuleiten:

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

und fügen Sie in der Modulkonfiguration eine weitere hinzu 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'
     });
}])

und es funktioniert gut für mich. Es wird nicht die gesamte Seite aktualisiert, sondern nur der aktuelle Controller und die Vorlage werden neu geladen. Ich weiß, dass es ein bisschen hackig ist, aber das war die einzige Lösung, die ich gefunden habe.

<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>

und in der Steuerung

 $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 });
                }
            };

und in der Routendatei

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

Wenn die in der URL übergebene ID mit der ID übereinstimmt, die durch Klicken auf den Anker aufgerufen wird, laden Sie sie einfach neu, andernfalls folgen Sie der angeforderten Route.

Bitte helfen Sie mir, diese Antwort zu verbessern, wenn dies hilfreich ist. Vorschläge sind willkommen.

Dies kann durch Aufrufen der reload () -Methode des Fensterobjekts in einfachem JavaScript erfolgen

window.location.reload();

Ich würde vorschlagen, die Seite zu verweisen. Offizieller Vorschlag

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

Dies kann durch Aufrufen der reload () -Methode in JavaScript erfolgen.

location.reload();