web-dev-qa-db-ja.com

AngularJs：ページの再読込み

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

ページをリロードします。これどうやってするの？

angularjsangularjs-scope
130
user880386

$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();
};
259
Alexandrin Rus

windowオブジェクトは$windowサービスを通して利用可能にされます より簡単なテストとモック あなたは以下のようなもので行くことができます：

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

そして：

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

ちなみに、$ route.reload（）が実際にページをリロードするとは思いませんが、 ルートのみ です。

51
Florian F.
 location.reload();

トリックをします。

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

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

ルートや必要なものは何もありません

17
user3806549

Alexandrinの答えに似ていますが、$ routeではなく$ stateを使用しています。

（JimTheDevのSO answer - here から）

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

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

Angularjsをもっと高度な ui-router を使っているなら、絶対にお勧めしますが、それでは単にあなたが使うことができます：

$state.reload();

これは基本的にDuncの答えと同じことをしています。

9
JamesEddyEdwards

無限ループを回避するための私の解決策は、リダイレクトを行った別の状態を作成することでした。

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

$route.reload()を使うだけで十分簡単です（コントローラに$ routeを挿入することを忘れないでください）が、あなたの例からは、単に "ng-href"の代わりに "href"を使うことができます：

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

Angularが{{}}タグの内容を置き換える前にクリックされたために無効なリンクからユーザーを保護するには、ng-hrefを使用するだけです。

1
spikeheap

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

そしてそれは私のためにちょうどうまく働きます。ページ全体を更新するのではなく、現在のコントローラとテンプレートをリロードするだけです。私はそれが少しハッキーだと思いますが、それが私が見つけた唯一の解決策でした。

1
vivanov
<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が、アンカーをクリックして呼び出された関数からのものと同じである場合は、単純にリロードします。それ以外の場合は、要求されたルートに従います。

これが助けになるなら、私がこの答えを改善するのを手伝ってください。どんな提案でも大歓迎です。

1
AMRESH PANDEY

Angular 2+

Angular 2+を検索しているときにこれを見つけました。

window.location.reload();
0
Nitin Jadhav