AngularJs:重新加载页面


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

我想重新加载页面。我怎样才能做到这一点?

Answers:


265

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

$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路由器):

正如JamesEddyEdwards和Dunc在回答中所提到的,如果您使用angular-ui / ui-router,则可以使用以下方法重新加载当前状态/路由。只是注入$state而不是$route然后您有:

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

2
如果您迫切希望对重新加载进行Angularise,这是一个很好的答案。
秒杀堆2014年

如何在全球范围内更改此行为,而不是向所有链接添加操作
OMGPOP,2015年

@OMGPOP您对所有链接的全局含义是什么?
Alexandrin Rus

我的意思是,对于所有链接,您都需要这样做。是否可以为所有链接配置一次?
OMGPOP,2015年

@AlexandrinRus这给了我以下[$ rootScope:infdig] 10个$ digest()迭代。流产!
alphapilgrim

52

window对象可以通过$window服务获得,以方便进行测试和模拟,您可以使用以下方法:

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

和:

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

附带说明一下,我认为$ route.reload()实际上不会重新加载页面,而只会重新加载route


2
我建议使用$window代替window
Jeroen

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

1
是的对不起 这是最好的解释$window文档,主要是因为reloadPage当它使用会(更好),可测试$window
Jeroen

19
 location.reload(); 

绝招。

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

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

无需路线或其他任何简单的旧js


2
爱简单!
肖恩·德·韦特

14

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

(从JimTheDev的SO答案在这里。)

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

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


5

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

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


1

只需使用它就很容易了$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的一部分?
饼干

1

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

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


一种更简单的方式是var reload = $location.url(); $location.url(''); $timeout(function() { $location.url(reload); });; 无需创建随机路由。但是,看看哪些代码不会为您重新评估会很有趣。看起来甚至redirectTos和resolve函数都可以正常执行$route.reload()(请参阅console.log)。
Hashbrown

1
<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相同,则只需重新加载即可,否则请遵循请求的路由。

如果有帮助,请帮助我改善此答案。任何,欢迎提出建议。


这花了我一个月的时间才弄清楚为什么页面无法重新加载
-SAM

0

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

window.location.reload();


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.