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

IT技术 javascript angularjs node.js reload rerender
2021-01-28 17:08:27

在基于多个用户上下文渲染整个页面并发出多个$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)会被取消，所以我不能使用它。此外，hack$location.path($location.path())也不起作用（什么也没发生）。

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

6个回答

作为记录，要强制 angular 重新呈现当前页面，您可以使用：

$route.reload();

根据 AngularJS文档：

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

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

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

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

$window.location.reload();

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

如果您想确保从服务器重新加载页面，例如，当您使用 Django 或其他 Web 框架并且想要全新的服务器端渲染时，请将true作为参数传递给reload，如文档中所述。由于这需要与服务器进行交互，因此速度会较慢，因此请仅在必要时进行

角 2

上述适用于角1.我不使用角2，貌似服务不同有，有Router，Location和DOCUMENT。我没有在那里测试不同的行为

当然，这会奏效，但这不是一个好习惯。看文档 $window，一开始就解释了使用它的原因：虽然 window 在 JavaScript 中是全局可用的，但它会导致可测试性问题，因为它是一个全局变量。在 angular 中，我们总是通过 $window 服务来引用它，因此它可能会被覆盖、删除或模拟以进行测试
2021-03-15 17:08:27
由于数据存储在服务中，使它们成为有状态而非无状态，我偶然发现了许多错误。除非我们谈论的是缓存服务（在这种情况下，会有一个接口来刷新它），否则我会将数据保留在服务之外和控制器中。例如，可以将数据保存在 localStorage 中，并使用服务来访问它。这将使服务免于将数据直接保存在其中。
2021-03-22 17:08:27
谁说的？应该在哪里存储缓存数据？
2021-03-28 17:08:27
值得注意的是，无论如何都不应该在服务中存储状态以要求“重新启动”服务。
2021-04-03 17:08:27
@danza应该在哪里存储缓存数据？...一个模型对象？然而，Angular 在命名他们的 MVCS 组件方面做得很糟糕。我通过 module.value API 保留可注入的模型对象。然后我在 ng 服务上定义的各种 API 改变模型对象的工作方式更像是命令。
2021-04-04 17:08:27

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

$location.path('/path1/path2');
$route.reload();
不知道为什么，但 .reload() 方法在这里似乎不起作用。它什么都不做。
2021-03-25 17:08:27

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

$scope.myLoadingFunction = function() {
    $state.reload();
};
在部署到共享主机后的我的 cli 项目中。当我重新加载我的项目时，它给出了 404 错误来解决这个问题。如果我添加“使用哈希”，那么它可以与“#”一起使用，但我不想要这个，有没有办法解决它。
2021-03-31 17:08:27

好吧，也许您在声明控制器的依赖项时忘记添加“$route”：

app.controller('NameCtrl', ['$scope','$route', function($scope,$route) {   
   // $route.reload(); Then this should work fine.
}]);
其它你可能感兴趣的问题
上一篇如何使用 Javascript 获取 URL 参数？ 下一篇打破Promise链并根据链中被打破（被拒绝）的步骤调用一个函数