web-dev-qa-db-ja.com

AngularJSを使用してページ全体をリロードまたは再レンダリングする方法

いくつかのユーザーコンテキストに基づいてページ全体をレンダリングし、いくつかの$httpリクエストを行った後、ユーザーにコンテキストを切り替えてすべてを再レンダリングできるようにしたい（すべての$httpリクエストを再送信するなど）。ユーザーを別の場所にリダイレクトしただけでは、問題は起こりません。

$scope.on_impersonate_success = function(response) {
  //$window.location.reload(); // This cancels any current request
  $location.path('/'); // This works as expected, if path != current_path
};

$scope.impersonate = function(username) {
  return auth.impersonate(username)
    .then($scope.on_impersonate_success, $scope.on_auth_failed);
};

$window.location.reload()を使用すると、応答を待っているauth.impersonate(username)上の$httpリクエストの一部がキャンセルされるため、それを使用することはできません。また、ハック$location.path($location.path())も機能しません（何も起こりません）。

手動ですべての要求を再度発行せずにページを再レンダリングする別の方法はありますか？

javascriptangularjsnode.jsreloadrerender
292
andersonvom

レコードの場合、現在のページをAngularに再レンダリングさせるには、次のようにします。

$route.reload();

AngularJSによると ドキュメント ：

$ locationが変更されていなくても、$ route serviceは現在のルートをリロードします。

その結果、ngViewは新しいスコープを作成し、コントローラを再インスタンス化します。

397
andersonvom

$route.reload()はコントローラを再初期化しますが、サービスは再初期化しません。アプリケーションの全体の状態をリセットしたい場合は、次のものを使用できます。

$window.location.reload();

これは 標準のDOMメソッド で、 $ window サービスを注入することでアクセスできます。

Djangoや他のWebフレームワークを使用しているときなど、サーバーからページを確実にリロードする必要がある場合は、 で説明されているように、trueをパラメーターとしてreloadに渡します。 。これはサーバーとのやり取りを必要とするため、遅くなりますので、必要な場合にのみ行ってください。

角2

上記はAngular 1に適用されます。私はAngular 2を使用していません。サービスが異なるように見え、Router、Location、およびDOCUMENTがあります。私はそこでさまざまな行動をテストしませんでした

309
danza

指定されたルートパスのページをリロードする場合： - 

$location.path('/path1/path2');
$route.reload();
37
Kumar Sambhav

角度型ui-routerを使用している場合 これが最良の解決策になります。

$scope.myLoadingFunction = function() {
    $state.reload();
};
28
Neha DP

たぶんあなたはあなたのコントローラの依存関係を宣言するときに "$ route"を追加するのを忘れていました：

app.controller('NameCtrl', ['$scope','$route', function($scope,$route) {   
   // $route.reload(); Then this should work fine.
}]);
24
Mario Medrano Maldonado

すべてをリロードするには、window.location.reload（）を使用してください。角度付き

実施例をチェックする

HTML

<div ng-controller="MyCtrl">  
<button  ng-click="reloadPage();">Reset</button>
</div>

angularJS

var myApp = angular.module('myApp',[]);

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

http://jsfiddle.net/HB7LU/22324/ /

9
Vaibs

Angular 2より前（角度）

ルート経由

$route.reload();

アプリケーション全体をリロードしたい場合

$window.location.reload();

Angular 2+ 

import { Location } from '@angular/common';

constructor(private location: Location) {}

ngOnInit() {  }

load() {
    this.location.reload()
}

または

constructor(private location: Location) {}

ngOnInit() {  }

Methods (){
    this.ngOnInit();
}
5
Thilina Sampath

使用しているサービスを更新しながらコントローラを更新したい場合は、次の解決策を使用できます。

  • $ stateを注入

すなわち.

app.controller('myCtrl',['$scope','MyService','$state', function($scope,MyService,$state) {

    //At the point where you want to refresh the controller including MyServices

    $state.reload();

    //OR:

    $state.go($state.current, {}, {reload: true});
}

これにより、コントローラとHTMLも更新され、 RefreshまたはRe-Render と呼びます。

5
Saurabh Sarathe

私が考え出した最も簡単な解決策は、

戻ってくるたびに毎回リロードしたいルートに '/'を追加します。

例えば：

次の代わりに

$routeProvider
  .when('/About', {
    templateUrl: 'about.html',
    controller: 'AboutCtrl'
  })

つかいます、

$routeProvider
  .when('/About/', { //notice the '/' at the end 
    templateUrl: 'about.html',
    controller: 'AboutCtrl'
  })
5
diyoda_

次のいずれかを試してください。

$route.reload(); // don't forget to inject $route in your controller
$window.location.reload();
location.reload();
4
Yamen Ashraf

キャッシュを削除してページをリロードするためのこの実用的なコードを入手しました。

表示 

        <a class="btn" ng-click="reload()">
            <i class="icon-reload"></i> 
        </a>

コントローラー

インジェクタ： $ scope、$ state、$ stateParams、$ templateCache 

       $scope.reload = function() { // To Reload anypage
            $templateCache.removeAll();     
            $state.transitionTo($state.current, $stateParams, { reload: true, inherit: true, notify: true });
        };
3
Ravi Mehta

以下のコードは、ユーザーへの詳細なリロード通知なしに使用してください。それはページをレンダリングするでしょう

var currentPageTemplate = $route.current.templateUrl;
$templateCache.remove(currentPageTemplate);
$window.location.reload();
3
KARTHIKEYAN.A