关于javascript：如何使用AngularJS重新加载或重新呈现整个页面


How to reload or re-render the entire page using AngularJS

在基于多个用户上下文呈现整个页面并提出多个$http请求后，我希望用户能够切换上下文并重新呈现所有内容(重新发送所有$http请求等)。如果我只是将用户重定向到其他地方，事情就会正常工作：

1
2
3
4
5
6
7
8
9
$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请求将被取消，因此我不能使用它。另外，黑客$location.path($location.path())也不起作用(什么也没发生)。

是否有其他方法可以在不手动再次发出所有请求的情况下重新呈现页面？

相关讨论

对于记录，要强制Angular重新渲染当前页，可以使用：

1
$route.reload();

根据AngularJS文件：

Causes $route service to reload the current route even if $location hasn't changed.

As a result of that, ngView creates new scope, reinstantiates the controller.

相关讨论

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

1
$window.location.reload();

这是一个标准的DOM方法，您可以访问它来注入$window服务。

如果您希望确保从服务器重新加载页面，例如，当您使用Django或其他Web框架并且需要新的服务器端呈现时，请将true作为参数传递给reload，如文档中所述。因为这需要与服务器交互，所以速度会变慢，所以只有在必要时才这样做。

角度2

以上适用于角1。我不使用Angular2，这里的服务好像不一样，有Router、Location和DOCUMENT。我没有在那里测试不同的行为

相关讨论

要重新加载给定路由路径的页面，请执行以下操作：

1
2
$location.path('/path1/path2');
$route.reload();
相关讨论

如果您使用AngularUI路由器，这将是最佳解决方案。

1
2
3
$scope.myLoadingFunction = function() {
    $state.reload();
};
相关讨论

那么，在声明控制器的依赖项时，可能忘记了添加"$route"：

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

只需重新加载所有内容，使用window.location.reload()；和angularJS

查看工作示例

HTML

1
<button  ng-click="reloadPage();">Reset</button>

角晶状体

1
2
3
4
5
var myApp = angular.module('myApp',[]);

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

http://jsfiddle.net/hb7lu/22324/

角度2之前(角度)

直通路线

1
$route.reload();

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

1
$window.location.reload();

角2

1
2
3
4
5
6
7
8
9
import { Location } from '@angular/common';

constructor(private location: Location) {}

ngOnInit() {  }

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

或

1
2
3
4
5
6
7
constructor(private location: Location) {}

ngOnInit() {  }

Methods (){
    this.ngOnInit();
}
相关讨论

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

  • 注入$状态

即

1
2
3
4
5
6
7
8
9
10
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，您也可以调用它刷新或重新呈现。

相关讨论

我想最简单的解决办法是，

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

如：

而不是以下内容

1
2
3
4
5
$routeProvider
  .when('/About', {
    templateUrl: 'about.html',
    controller: 'AboutCtrl'
  })

使用，

1
2
3
4
5
$routeProvider
  .when('/About/', { //notice the '/' at the end
    templateUrl: 'about.html',
    controller: 'AboutCtrl'
  })
相关讨论

尝试下列操作之一：

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

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

视图

1
            <i class="icon-reload">

控制器

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

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

使用以下代码，而不向用户发出详细的重新加载通知。它将呈现页面

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

几个月来，我一直在努力解决这个问题，唯一有效的解决办法是：

1
2
var landingUrl ="http://www.ytopic.es"; //URL complete
$window.location.href = landingUrl;
相关讨论