AngularJs：重新加载页面

Question

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

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

- user880386

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

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

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

- Alexandrin Rus

---

如果你迫切需要将重新加载Angular化，那么这是一个不错的答案。 - spikeheap

我该如何全局改变这种行为，而不是为所有链接添加一个操作？ - OMGPOP

@OMGPOP 你所说的“全局链接”是什么意思？ - Alexandrin Rus

我的意思是，对于所有的链接，您需要这样做。是否可以一次配置所有链接？ - OMGPOP

@AlexandrinRus 这给了我以下错误信息 [$rootScope:infdig] 已达到10次 $digest() 迭代。终止! - alphapilgrim

Answer 2

window 对象通过 $window 服务提供，以便于更容易地进行测试和模拟。你可以尝试以下代码：

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

并且：

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

顺便提一下，我认为$route.reload()并不会重新加载整个页面，而是只会重新加载路由。

- Florian F.

---

我建议使用$window而不是window。 - Jeroen

感谢您的贡献。您能解释一下为什么吗？ - Florian F.

是的，很抱歉。最好通过$window文档进行解释(https://docs.angularjs.org/api/ng/service/$window)，主要是因为当`reloadPage`使用`$window`时，它会更容易测试。 - Jeroen

Answer 3

 location.reload(); 

有效果。

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

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

不需要路由或任何其他东西，只需使用普通的JavaScript。

- user3806549

---

喜欢这种简洁！ - Shawn de Wet

它会导致 karma/jasmine 测试失败，因为它会进行完整的页面重新加载，并且无法模拟。 通过使用 $window 提供者，可以在测试中进行模拟。 - Bruno Vasconcelos

Answer 4

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

(来自JimTheDev的SO答案这里。)

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

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

- Dunc

Answer 5

如果使用更高级的ui-router（我强烈建议），则可以直接使用以下代码：

$state.reload();

这基本上与Dunc的答案相同。

- JamesEddyEdwards

Answer 6

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

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

- Gucu112

Answer 7

Angular 2+

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

最初的回答

$window.location.reload();

- Nitin Jadhav

---

这并不是特定于Angular的，顺便说一下，这是JavaScript的方式。 - Nitin Jadhav

Answer 8

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

location.reload();

- Madhusanka Edirimanna

Answer 9

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

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

- vivanov

---

一种更简单的方法可能是 var reload = $location.url(); $location.url(''); $timeout(function() { $location.url(reload); });，不需要创建随机路由。但是看看哪些代码不会重新评估会很有趣。看起来即使是 redirectTo 和 resolve 函数在普通的 $route.reload() 上也会重新执行（查看 console.log）。 - Hashbrown

Answer 10

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

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

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

- spikeheap

---

$route是ng.route.IRouteService的一部分吗？ - cracker