AngularJs:重新加载页面

时间:2014-02-19 15:49:08

标签: angularjs angularjs-scope

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

我想重新加载页面。我怎么能这样做?

13 个答案:

答案 0 :(得分:259)

您可以使用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-router):

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

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

答案 1 :(得分:51)

window对象通过easier testing and mocking$window服务提供,您可以使用以下内容:

$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

答案 2 :(得分:18)

 location.reload(); 

诀窍。

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

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

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

答案 3 :(得分:14)

与亚历山大的答案类似,但使用$ state而不是$ route:

(来自JimTheDev的回答here。)

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

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

答案 4 :(得分:9)

如果使用Angulars更高级的ui-router我肯定会推荐,那么您现在可以使用:

$state.reload();

这与Dunc的回答基本相同。

答案 5 :(得分:2)

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

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

答案 6 :(得分:1)

使用$route.reload()很容易(不要忘记将$ route注入你的控制器),但是从你的例子中你可以使用“href”代替“ng-href”:

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

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

答案 7 :(得分: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'
     });
}])

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

答案 8 :(得分: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与通过单击锚点调用的函数的内容相同,则只需重新加载,否则请按照请求的路径进行操作。

如果有帮助,请帮我改进这个答案。欢迎任何建议。

答案 9 :(得分:0)

Angular 2 +

我在搜索Angular 2+时发现了这个问题,这是这样的:

window.location.reload();

答案 10 :(得分:0)

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

window.location.reload();

答案 11 :(得分:0)

我建议参考该页面。官方建议

https://docs.angularjs.org/guide/$location

enter image description here

答案 12 :(得分:0)

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

location.reload();