AngularJs：重新加载页面

Posted 2023-02-22

技术标签:

【中文标题】AngularJs：重新加载页面【英文标题】：AngularJs: Reload page 【发布时间】：2014-03-20 01:55:50 【问题描述】：

<a ng-href="#" class="navbar-brand" title="home" data-translate>PORTAL_NAME</a>

我想重新加载页面。我该怎么做？

【问题讨论】：

【参考方案1】：

您可以使用$route 服务的reload 方法。在您的控制器中注入$route，然后在您的$scope 上创建一个方法reloadRoute。

$scope.reloadRoute = function() 
   $route.reload();

然后你可以像这样在链接上使用它：

<a ng-click="reloadRoute()" class="navbar-brand" title="home" data-translate>PORTAL_NAME</a>

此方法将导致当前路由重新加载。但是，如果您想执行完全刷新，则可以注入 $window 并使用它：

$scope.reloadRoute = function() 
   $window.location.reload();

**稍后编辑（ui-router）：**

正如 JamesEddyEdwards 和 Dunc 在他们的回答中提到的，如果您使用的是 angular-ui/ui-router，您可以使用以下方法重新加载当前状态/路线。只需注入 $state 而不是 $route 然后你就有了：

$scope.reloadRoute = function() 
    $state.reload();
;

【讨论】：

如果您迫切希望重新加载 Angularise，这是一个很好的答案。我怎样才能在全局范围内更改此行为，而不是向所有链接添加操作 @OMGPOP 对于所有链接，全局是什么意思？我的意思是，对于您需要执行此操作的所有链接。是否可以为所有链接配置一次？ @AlexandrinRus 这给了我以下 [$rootScope:infdig] 10 $digest() 迭代次数。中止！【参考方案2】：

window 对象是通过$window 服务为easier testing and mocking 提供的，你可以使用类似的东西：

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

还有：

<a ng-click="reloadPage"  class="navbar-brand" title="home"  data-translate>PORTAL_NAME</a>

顺便说一句，我不认为 $route.reload() 实际上会重新加载页面，而是 only the route。

【讨论】：

我建议使用$window 而不是window。感谢您的贡献。你能解释一下为什么吗？是的，对不起。最好用the $window docs 解释，主要是因为reloadPage 在使用$window 时会（更好）可测试。【参考方案3】：

 location.reload();

成功了。

<a ng-click="reload()">

$scope.reload = function()

   location.reload();

不需要路由或任何简单的旧js

【讨论】：

喜欢简单！它会破坏业力/茉莉花测试，因为它会重新加载页面并且不可模拟。通过使用$window 提供程序，可以在测试中进行模拟【参考方案4】：

类似于 Alexandrin 的回答，但使用 $state 而不是 $route：

（来自 JimTheDev 的 SO 回答 here。）

$scope.reloadState = function() 
   $state.go($state.current, , reload: true);


<a ng-click="reloadState()" ...

【讨论】：

【参考方案5】：

如果使用我绝对推荐的更高级的 Angulars ui-router，那么您现在可以简单地使用：

$state.reload();

这与邓克的回答基本相同。

【讨论】：

【参考方案6】：

我避免无限循环的解决方案是创建另一个进行重定向的状态：

$stateProvider.state('app.admin.main', 
    url: '/admin/main',
    authenticate: 'admin',
    controller: ($state, $window) => 
      $state.go('app.admin.overview').then(() => 
        $window.location.reload();
      );
    
  );

【讨论】：

【参考方案7】：

Angular 2+

我在搜索 Angular 2+ 时发现了这个，所以方法如下：

$window.location.reload();

【讨论】：

这不是 Angular 特有的，顺便说一下，它的 javascript 方式。【参考方案8】：

这可以通过在 JavaScript 中调用 reload() 方法来完成。

location.reload();

【讨论】：

【参考方案9】：

使用$route.reload() 很容易（不要忘记将 $route 注入您的控制器），但从您的示例中，您可以使用“href”而不是“ng-href”：

<a href=""  class="navbar-brand" title="home"  data-translate>PORTAL_NAME</a>

您只需要使用 ng-href 来保护用户免受他们在 Angular 替换标签的内容之前点击导致的无效链接。

【讨论】：

$route 是 ng.route.IRouteService 的一部分？？【参考方案10】：

在 Angular 1.5 上 - 在尝试了上述一些解决方案后，只想重新加载数据而不刷新整页，我在正确加载数据时遇到了问题。不过我注意到，当我转到另一条路线然后返回当前路线时，一切正常，但是当我只想使用$route.reload() 重新加载当前路线时，某些代码无法正确执行。然后我尝试通过以下方式重定向到当前路由：

$scope.someFuncName = function () 
    //go to another route
    $location.path('/another-route');
;

在模块配置中，添加另一个when:

.config(['$routeProvider', function($routeProvider) 
     $routeProvider.when('/first-page', 
         templateUrl: '/first-template',
         controller: 'SomeCtrl'
     ).when('/another-route', //this is the new "when"
         redirectTo: '/first-page'
     );
])

它对我来说很好用。它不会刷新整个页面，而只会导致当前控制器和模板重新加载。我知道这有点 hacky，但这是我找到的唯一解决方案。

【讨论】：

一个更简单的方法可能是var reload = $location.url(); $location.url(''); $timeout(function() $location.url(reload); );;无需创建随机路线。但是看看哪些代码不会为您重新评估会很有趣。看起来甚至redirectTos 和resolve 函数re-execute on a normal $route.reload()（查看console.log 的）。【参考方案11】：

<a title="Pending Employee Approvals" href="" ng-click="viewPendingApprovals(1)">
                    <i class="fa fa-user" aria-hidden="true"></i>
                    <span class="button_badge">pendingEmployeeApprovalCount</span>
                </a>

在控制器中

 $scope.viewPendingApprovals = function(type) 
                if (window.location.hash.substring(window.location.hash.lastIndexOf('/') + 1, window.location.hash.length) == type) 
                    location.reload();
                 else 
                    $state.go("home.pendingApproval",  id: sessionStorage.typeToLoad );
                
            ;

在路由文件中

.state('home.pendingApproval', 
        url: '/pendingApproval/:id',
        templateUrl: 'app/components/approvals/pendingApprovalList.html',
        controller: 'pendingApprovalListController'
    )

所以，如果 url 中传递的 id 与单击锚点调用的函数中的 id 相同，则只需重新加载，否则按照请求的路线。

如果有帮助，请帮我改进这个答案。欢迎大家提出建议。

【讨论】：

这花了我一个月的时间才弄清楚为什么页面没有重新加载【参考方案12】：

这可以通过在纯 JavaScript 中调用窗口对象的 reload() 方法来完成