如何重新加载或重新渲染整个页面使用AngularJS

在基于几个用户上下文渲染整个页面并做出几个$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())也不起作用(什么都没有发生)。

是否有另一种方法可以重新呈现页面，而无需再次手动发出所有请求?

673069 次浏览
小开
最佳答案

为了记录，强制angular重新渲染当前页面，你可以使用:

$route.reload();

根据AngularJS 文档:

导致$route服务重新加载当前路由，即使$location没有改变。

因此，ngView会创建新的作用域，重新实例化控制器。

小开

用于重新加载给定路由路径的页面:-

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

也许你在声明控制器的依赖项时忘记添加"$route":

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

$route.reload()将重新初始化控制器，而不是服务。如果你想重置你的应用程序的整个状态，你可以使用:

$window.location.reload();

这是一个标准DOM方法，你可以通过注入美元的窗口服务来访问它。

如果你想确保从服务器重新加载页面，例如当你使用Django或其他web框架，你想要一个新的服务器端渲染，将true作为参数传递给reload，正如的文档中解释的那样。因为这需要与服务器交互，所以速度会慢一些，所以只有在必要时才这样做

角2

以上内容适用于Angular 1。我没有使用Angular 2，看起来那里的服务是不同的，有Router、Location和DOCUMENT。我没有测试不同的行为

小开

几个月来，我一直在努力解决这个问题，唯一对我有效的解决方案是:

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

为了重新加载所有内容，使用window.location.reload();与angularjs

查看工作示例

超文本标记语言

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

小开

我认为最简单的解决方法是，

在每次返回时都要重新加载的路由中添加'/'。

例如:

而不是下面这些

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

使用,

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

使用下面的代码，而不向用户发送重载通知。它将呈现页面

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

如果你想在刷新你正在使用的任何服务的同时刷新控制器，你可以使用这个解决方案:

  • 美元注入状态

即。

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，你可以称之为刷新或重新渲染。

小开

如果你正在使用角ui-router，这将是最好的解决方案。

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

我得到了这个工作代码删除缓存和重新加载页面

视图

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

控制器

喷油器:范围、状态,美元stateParams, templateCache美元

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

在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();
}
小开

试试下面的方法:

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

提交答案