如何使用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(),那么一些$http请求auth.impersonate(username)等待响应被取消,所以我不能使用它.此外,黑客$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

上述适用于角1.我不使用角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

尝试以下方法之一：

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

Answer 8

如果要在刷新正在使用的任何服务时刷新控制器,可以使用此解决方案:

• 注入$ 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 9

Angular 2之前（AngularJs）

通过路线

$route.reload();

如果您想重新加载整个应用程序

$window.location.reload();

角2+

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

constructor(private location: Location) {}

ngOnInit() {  }

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

要么

constructor(private location: Location) {}

ngOnInit() {  }

Methods (){
    this.ngOnInit();
}

Answer 10

我认为最简单的解决方案是,

每次回来时都要添加'/'到想要重新加载的路由.

例如:

而不是以下

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

使用,

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