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

JavaScript Node.js

Pro神无

2020-03-19

在基于几个用户上下文渲染了整个页面并提出了几个$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())也无法运作(一无所获)。

还有另一种方法可以重新渲染页面,而无需再次手动发出所有请求吗?

第2210篇《如何使用AngularJS重新加载或重新渲染整个页面》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

6个回答
老丝小卤蛋 2020.03.19

我已经为这个问题进行了数月的艰苦奋斗,而对我来说唯一有效的解决方案是:

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

使用以下代码,而无需向用户发送密切的重新加载通知。它将呈现页面

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

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

视图

        <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 });
        };
前端梅 2020.03.19

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

$window.location.reload();

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

如果要确保从服务器重新加载页面(例如,当您使用Django或其他Web框架时),并且想要新的服务器端渲染,请true按照docs中的reload说明作为参数传递由于这需要与服务器交互,因此它会变慢,因此仅在必要时才这样做

角度2

上述适用于角1.我不使用角2,貌似服务不同有,有RouterLocationDOCUMENT我没有在那里测试不同的行为

番长蛋蛋Davaid 2020.03.19

为了进行记录,要强制angular重新呈现当前页面,可以使用:

$route.reload();

根据AngularJS 文档

即使$ location保持不变,也使$ route服务重新加载当前路由。

结果,ngView创建了新的作用域,重新实例化了控制器。

ProA 2020.03.19

如果您使用的是角度ui路由器,这将是最佳解决方案。

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android