如何使用AngularJS重新加載或重新呈現整個頁面

Question

在基於多個用戶上下文呈現整個頁面並且已經發出多個$http請求之后，我希望用戶能夠切換上下文並再次重新呈現所有內容（重新發送所有$http請求等）。 如果我只是將用戶重定向到其他地方，那么事情就會正常運行：

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

如果我使用$window.location.reload() ，那么等待響應的auth.impersonate(username)上的一些$http請求會被取消，所以我不能使用它。 此外，hack $location.path($location.path())也不起作用（沒有任何反應）。

是否有另一種方法可以重新呈現頁面而無需再次手動發出所有請求？

Answer 1

對於記錄，要強制角度重新渲染當前頁面，您可以使用：

$route.reload();

根據AngularJS 文檔 ：

即使$ location未更改，也會導致$ route服務重新加載當前路由。

因此，ngView創建新范圍，重新實例化控制器。

Answer 2

$route.reload()將重新初始化控制器，但不重新初始化服務。 如果要重置應用程序的整個狀態，可以使用：

$window.location.reload();

這是一個標准的DOM方法 ，您可以訪問注入$ window服務。

如果您想確保從服務器重新加載頁面，例如當您使用Django或其他Web框架並且想要新的服務器端渲染時，請將true作為參數傳遞給reload ，如文檔中所述 。 由於這需要與服務器進行交互，因此速度會較慢，因此只在必要時才這樣做

Angular 2

以上適用於Angular 1.我沒有使用Angular 2，看起來服務有所不同，有Router ， Location和DOCUMENT 。 我沒有在那里測試不同的行為

Answer 3

用於重新加載給定路徑路徑的頁面： -

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

Answer 4

如果您使用角度ui-router，這將是最佳解決方案。

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

Answer 5

好吧，也許您在聲明Controller的依賴關系時忘記添加“$ route”：

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

Answer 6

要重新加載所有內容，請使用window.location.reload（）; 與angularjs

查看工作示例

HTML

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

angularJS

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

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

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

Answer 7

如果要在刷新正在使用的任何服務時刷新控制器，可以使用此解決方案：

• 注入$ state

即

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

這將刷新控制器和HTML，您可以將其稱為刷新或重新渲染 。

Answer 8

在Angular 2之前（AngularJs）

通過路線

$route.reload();

如果要重新加載整個應用程序

$window.location.reload();

Angular 2+

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

constructor(private location: Location) {}

ngOnInit() {  }

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

要么

constructor(private location: Location) {}

ngOnInit() {  }

Methods (){
    this.ngOnInit();
}

Answer 9

我認為最簡單的解決方案是，

每次回來時都要添加'/'到想要重新加載的路由。

例如：

而不是以下

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

使用，

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

Answer 10

我得到了這個工作代碼，用於刪除緩存和重新加載頁面

視圖

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

調節器

注入器： $ scope，$ state，$ stateParams，$ templateCache

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

Answer 11

請嘗試以下方法之一：

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

Answer 12

使用以下代碼而不向用戶發送私密重新加載通知。 它將呈現頁面

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

Answer 13

幾個月來我一直在努力解決這個問題，唯一對我有用的解決方案是：

var landingUrl = "http://www.ytopic.es"; //URL complete
$window.location.href = landingUrl;