ChatGPT解决这个技术问题 Extra ChatGPT

如何使用 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()) 也不起作用(没有任何反应)。

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

正如 Alvaro Joao 在下面所说,您需要使用 angular-route.js 才能使其正常工作。 bennadel.com/blog/…
AngularJs: Reload page 的可能重复项

S
Scotty.NET

作为记录,要强制角度重新渲染当前页面,您可以使用:

$route.reload();

根据 AngularJS documentation

即使 $location 没有更改,也会导致 $route 服务重新加载当前路由。结果,ngView 创建了新的范围,重新实例化了控制器。


感谢您的评论,由于某种原因,与正常刷新相比,我使用 $route.reload() 时的行为似乎略有不同。例如,一个选项卡设置为在刷新时初始显示,但是当重新加载方法似乎在没有设置选项卡的情况下重新加载页面时,不确定问题是什么。
这是否也运行过滤器/服务?获得不想要的持久状态。编辑:仍然赞成正确回答问题,这非常有帮助。谢谢
请记住将 $route 注入控制器以使其正常工作。
@alphapilgrim ngRoute 模块不再是核心 angular.js file 的一部分。如果您继续使用 $routeProvider,那么您现在需要在 HTML 中包含 angular-route.js
$state.reload() 如果你使用 stateProvider
d
danza

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

$window.location.reload();

这是一个 standard DOM method,您可以通过注入 $window 服务来访问它。

如果您想确保从服务器重新加载页面,例如,当您使用 Django 或其他 Web 框架并且想要全新的服务器端呈现时,请将 true 作为参数传递给 reload,如 { 1}。由于这需要与服务器进行交互,因此速度会较慢,因此仅在必要时才这样做

角 2

以上适用于 Angular 1。我没有使用 Angular 2,看起来那里的服务不同,有 RouterLocationDOCUMENT。我没有在那里测试不同的行为


值得注意的是,无论如何都不应该在服务中存储状态以要求“重新启动”服务。
谁说的?应该在哪里存储缓存数据?
由于数据存储在服务中,我偶然发现了很多错误,使它们有状态而不是无状态。除非我们谈论的是缓存服务(在这种情况下,会有一个接口来刷新它),否则我会将数据保留在服务之外和控制器中。例如,可以将数据保存在 localStorage 中,并使用服务来访问它。这将使服务免于将数据直接保存在其中。
@danza 应该在哪里存储缓存数据? ...模型对象?然而,Angular 在命名他们的 MVCS 组件方面做得很糟糕。我通过 module.value API 保留可注入模型对象。然后,我在 ng 服务上定义的用于更改模型对象的各种 API 更像是命令。
当然,这会起作用,但这不是一个好的做法。参见the documentation about $window,开头解释了使用它的原因:虽然窗口在 JavaScript 中是全局可用的,但它会导致可测试性问题,因为它是一个全局变量。在 Angular 中,我们总是通过 $window 服务引用它,因此它可能会被覆盖、删除或模拟以进行测试
K
Kumar Sambhav

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

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

不知道为什么,但 .reload() 方法似乎在这里不起作用。它没有任何作用。
H
Hardik Vaghani

如果您使用的是 angular ui-router,这将是最好的解决方案。

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

在部署到共享主机后的我的 cli 项目中。当我重新加载我的项目时,它给出了 404 错误来解决这个问题。如果我添加“使用哈希”,那么它可以与“#”一起使用,但我不想要这个,有没有办法解决它。
M
Mario Medrano Maldonado

好吧,也许您在声明 Controller 的依赖项时忘记添加“$route”:

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

V
Vaibs

只需重新加载所有内容,请使用 window.location.reload();用 angularjs

查看工作示例

HTML

<div ng-controller="MyCtrl">  
<button  ng-click="reloadPage();">Reset</button>
</div>

角JS

var myApp = angular.module('myApp',[]);

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

http://jsfiddle.net/HB7LU/22324/


t
trincot

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

注入 $state

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});
}

这将刷新控制器和 HTML,您也可以将其称为 Refresh 或 Re-Render。


这是用于 ui 路由器而不是 Angular。
Y
Yamen Ashraf

尝试以下方法之一:

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

C
Community

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

仅供参考 - Angular 7:“'位置'类型上不存在属性'重新加载'”。
@Cristina 感谢您的信息。我在角度 7 之前使用它
d
diyoda_

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

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

例如:

而不是以下

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

利用,

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

@PardeepJain 这对我有用。这就是为什么这是一个答案。你对我的回答投了反对票吗?
不,一点也不,你的回答并不是那么糟糕。太棒了,我现在不明白为什么在 angular2 中同样的方法对我不起作用。
完美的解决方案。谢谢!
即使您的原始路径是应用程序的根目录,这仍然有效 - / :O 我的路线现在看起来像这样://
在 Angular 6 中,它在使用 #same 后也可以用于 Angular2。也这样觉得
R
Ravi Mehta

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

看法

        <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 });
        };

K
KARTHIKEYAN.A

使用以下代码,无需向用户发出贴心的重新加载通知。它将呈现页面

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

J
Jose Ramon Leon Somovilla

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

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

这与 OP 特别提到的在他的情况下无法正常工作的 $window.location.reload() 几乎没有什么不同。