[英]How to reload or re-render the entire page using AngularJS
After rendering the entire page based on several user contexts and having made several $http
requests, I want the user to be able to switch contexts and re-render everything again (resending all $http
requests, etc). 在基于多个用户上下文呈现整个页面并且已经发出多个
$http
请求之后,我希望用户能够切换上下文并再次重新呈现所有内容(重新发送所有$http
请求等)。 If I just redirect the user somewhere else, things work properly: 如果我只是将用户重定向到其他地方,那么事情就会正常运行:
$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);
};
If I use $window.location.reload()
, then some of the $http
requests on auth.impersonate(username)
that are waiting for a response get cancelled, so I can't use that. 如果我使用
$window.location.reload()
,那么等待响应的auth.impersonate(username)
上的一些$http
请求会被取消,所以我不能使用它。 Also, the hack $location.path($location.path())
doesn't work either (nothing happens). 此外,hack
$location.path($location.path())
也不起作用(没有任何反应)。
Is there another way to re-render the page without manually issuing all requests again? 是否有另一种方法可以重新呈现页面而无需再次手动发出所有请求?
For the record, to force angular to re-render the current page, you can use: 对于记录,要强制角度重新渲染当前页面,您可以使用:
$route.reload();
According to AngularJS documentation : 根据AngularJS 文档 :
Causes $route service to reload the current route even if $location hasn't changed.
即使$ location未更改,也会导致$ route服务重新加载当前路由。
As a result of that, ngView creates new scope, reinstantiates the controller.
因此,ngView创建新范围,重新实例化控制器。
$route.reload()
will reinitialise the controllers but not the services. $route.reload()
将重新初始化控制器,但不重新初始化服务。 If you want to reset the whole state of your application you can use: 如果要重置应用程序的整个状态,可以使用:
$window.location.reload();
This is a standard DOM method which you can access injecting the $window service. 这是一个标准的DOM方法 ,您可以访问注入$ window服务。
If you want to be sure to reload the page from the server, for example when you are using Django or another web framework and you want a fresh server side render, pass true
as a parameter to reload
, as explained in the docs . 如果您想确保从服务器重新加载页面,例如当您使用Django或其他Web框架并且想要新的服务器端渲染时,请将
true
作为参数传递给reload
,如文档中所述 。 Since that requires interaction with the server, it will be slower so do it only if necessary 由于这需要与服务器进行交互,因此速度会较慢,因此只在必要时才这样做
The above applies to Angular 1. I am not using Angular 2, looks like the services are different there, there is Router
, Location
, and the DOCUMENT
. 以上适用于Angular 1.我没有使用Angular 2,看起来服务有所不同,有
Router
, Location
和DOCUMENT
。 I did not test different behaviors there 我没有在那里测试不同的行为
For reloading the page for a given route path :- 用于重新加载给定路径路径的页面: -
$location.path('/path1/path2');
$route.reload();
If you are using angular ui-router this will be the best solution. 如果您使用角度ui-router,这将是最佳解决方案。
$scope.myLoadingFunction = function() {
$state.reload();
};
Well maybe you forgot to add "$route" when declaring the dependencies of your Controller: 好吧,也许您在声明Controller的依赖关系时忘记添加“$ route”:
app.controller('NameCtrl', ['$scope','$route', function($scope,$route) {
// $route.reload(); Then this should work fine.
}]);
Just to reload everything , use window.location.reload(); 要重新加载所有内容,请使用window.location.reload(); with angularjs
与angularjs
Check out working example 查看工作示例
HTML HTML
<div ng-controller="MyCtrl">
<button ng-click="reloadPage();">Reset</button>
</div>
angularJS angularJS
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.reloadPage = function(){window.location.reload();}
}
http://jsfiddle.net/HB7LU/22324/ http://jsfiddle.net/HB7LU/22324/
If you want to refresh the controller while refreshing any services you are using, you can use this solution: 如果要在刷新正在使用的任何服务时刷新控制器,可以使用此解决方案:
ie 即
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});
}
This will refresh the controller and the HTML as well you can call it Refresh or Re-Render . 这将刷新控制器和HTML,您可以将其称为刷新或重新渲染 。
Before Angular 2 ( AngularJs ) 在Angular 2之前(AngularJs)
Through route 通过路线
$route.reload();
If you want reload whole Application 如果要重新加载整个应用程序
$window.location.reload();
Angular 2+ Angular 2+
import { Location } from '@angular/common';
constructor(private location: Location) {}
ngOnInit() { }
load() {
this.location.reload()
}
Or 要么
constructor(private location: Location) {}
ngOnInit() { }
Methods (){
this.ngOnInit();
}
Easiest solution I figured was, 我认为最简单的解决方案是,
add '/' to the route that want to be reloaded every time when coming back. 每次回来时都要添加'/'到想要重新加载的路由。
eg: 例如:
instead of the following 而不是以下
$routeProvider
.when('/About', {
templateUrl: 'about.html',
controller: 'AboutCtrl'
})
use, 使用,
$routeProvider
.when('/About/', { //notice the '/' at the end
templateUrl: 'about.html',
controller: 'AboutCtrl'
})
I got this working code for removing cache and reloading the page 我得到了这个工作代码,用于删除缓存和重新加载页面
View 视图
<a class="btn" ng-click="reload()">
<i class="icon-reload"></i>
</a>
Controller 调节器
Injectors: $scope,$state,$stateParams,$templateCache 注入器: $ scope,$ state,$ stateParams,$ templateCache
$scope.reload = function() { // To Reload anypage
$templateCache.removeAll();
$state.transitionTo($state.current, $stateParams, { reload: true, inherit: true, notify: true });
};
Try one of the following: 请尝试以下方法之一:
$route.reload(); // don't forget to inject $route in your controller
$window.location.reload();
location.reload();
Use the following code without intimate reload notification to the user. 使用以下代码而不向用户发送私密重新加载通知。 It will render the page
它将呈现页面
var currentPageTemplate = $route.current.templateUrl;
$templateCache.remove(currentPageTemplate);
$window.location.reload();
I've had a hard fight with this problem for months, and the only solution that worked for me is this: 几个月来我一直在努力解决这个问题,唯一对我有用的解决方案是:
var landingUrl = "http://www.ytopic.es"; //URL complete
$window.location.href = landingUrl;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.