現在の状態をリロードする方法は?


333

Angular UIルーターを使用していて、現在の状態を再読み込みしてすべてのデータを更新したい/現在の状態とその親のコントローラーを再実行したい

私は3つの州レベルがあります:directory.organisations.details

directory.organisationsには、組織のリストを含むテーブルが含まれています。テーブル内のアイテムをクリックすると、$ StateParamsがアイテムのIDを渡してdirectory.organisations.detailsが読み込まれます。したがって、詳細状態では、このアイテムの詳細をロードして編集し、データを保存します。これまでのところ問題ありません。

次に、この状態をリロードしてすべてのデータを更新する必要があります。

私が試してみました:

 $state.transitionTo('directory.organisations');

これは親の状態になりますが、コントローラーをリロードしません。パスが変更されていないためです。理想的には、私は単にdirectory.organisations.details状態に留まり、親のすべてのデータも更新したいだけです。

私も試しました:

$state.reload()

$ state.reloadのAPI WIKIでこれを確認しました "(コントローラーのバグが今すぐ再インスタンス化され、すぐに修正されます)。"

何か助けていただけませんか?


7
私はこれを次のように解決しました:$ state.transitionTo($ state.current、$ stateParams、{reload:true、inherit:false、notify:true});
Holland Risley

1
このコードをどこに追加しますか?
Manoj G

バグは今修正されていますか? github.com/angular-ui/ui-router/wiki/...
jchnxu

コードはどこ$state.transitionTo($state.current, $stateParams, {reload:true, inherit:false})に追加する必要がありますか?状態のリロードでこれと同じ問題が発生すると、すべてのデータが失われます。
Evan Burbidge 2016年

回答:


565

私はこれがui-routerで更新する最も短い方法であることがわかりました:

$state.go($state.current, {}, {reload: true}); //second parameter is for $stateParams

新しいバージョンの更新

$state.reload();

これは次のエイリアスです。

$state.transitionTo($state.current, $stateParams, { 
  reload: true, inherit: false, notify: true
});

ドキュメント:https : //angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state#methods_reload


21
これらのどれも実際にページをリロードしないことはおそらく注目に値します。状態とページをリロードしたい場合、そのui-router方法はないと思います。してくださいwindow.location.reload(true)
SimplGy 2014年

15
@SimpleAsCouldBeもしあなたがそれについてもっと角度をつけたいなら、あなたはそうすることができます$window.location.reload();。これは少しやり過ぎに見えますが、すべての依存関係のテスト/モック/認識を行うには、コードの一部が少し簡単になります。
edhedges 2014年

1
"$ state.current"の正確な意味は何ですか?ui-routerのAPIについての明確な説明がわかりません。ご協力いただければ幸いです。
user2499325

3
@ user2499325:$ state.currentは、あなたが持っているすべてのデータを含むオブジェクトを返しますstateProvider: `` `{url:" / place /:placeId "、controller:" NewPlaceController "、controllerAs:" placeVM "、templateUrl:" places /new.place/new.place.details.html "、name:" index.places.placeDetails "}` ``
Xavier Haniquaut

1
パラメータが既にロードされている場合は、{}を$ stateParamsに置き換えることができます。$ state.go($ state.current、$ stateParams、{reload:true});
tsuz 2016年

154

このソリューションはAngularJS V.1.2.2で機能します。

$state.transitionTo($state.current, $stateParams, {
    reload: true,
    inherit: false,
    notify: true
});

8
無限ループが発生しないように、これをどこに追加しますか?
Pathsofdesign 2014

5
これでresolve州の品目が解決されますか?
TheSharpieOne

7
また、あなたは$ state.paramsへの呼び出しを変更した場合は$ stateParamsを注入する必要はありません
ジェフ・アンセル

4
現在の最高投票数の回答よりもはるかにうまく機能し、実際にページをリロードします。無限ループの問題がある場合、リロードはおそらく間違った場所にあります。私はボタンクリックでのみ使用しています
Dan

2
@ManojGには少し遅れますが、このコードを、リロードを強制する必要がある任意の場所に配置します-おそらくng-clickディレクティブ関数または他のイベントで。明らかな理由(無限ループ)のため、すべてのページの読み込みで実行するべきではありません
15

68

それが最終的な解決策です。(@Hollan_Risleyの投稿に触発された)

'use strict';

angular.module('app')

.config(function($provide) {
    $provide.decorator('$state', function($delegate, $stateParams) {
        $delegate.forceReload = function() {
            return $delegate.go($delegate.current, $stateParams, {
                reload: true,
                inherit: false,
                notify: true
            });
        };
        return $delegate;
    });
});

今、リロードする必要があるときはいつでも、単に次を呼び出します:

$state.forceReload();

6
死のinifinitループ
CS

6
どこかにトリガーされるインターセプターがあるようですね。このソリューションを何度かテストしたところ、問題なく動作しました。
MK、

2
@MKそのメモありがとうございます。それは私自身の別の問題の解決へと私を導きました。リクエストが2倍になり、その後3倍になるなどの理由を見つけるために何時間も費やしましたが、すべてインターセプター(github.com/witoldsz/angular-http-auth)が原因でした。
Maciej Gurban 2014

57

イオンフレームワーク用

$state.transitionTo($state.current, $state.$current.params, { reload: true, inherit: true, notify: true });//reload

$stateProvider.
  state('home', {
    url: '/',
    cache: false, //required

https://github.com/angular-ui/ui-router/issues/582


$state.go新しい状態へのリダイレクトに失敗した私にとってはうまくいきます。@RouRに感謝します。私の日を救った。
Guillaume Wuip 2015

$ state.goを$ state.transitionToに置き換えます。したがって、$ state.goを呼び出す場所はどこでも、それを置き換えてください。$ state.transitionTo( 'tab-name'、{key:value}、{reload:true、inherit:true、notify:true}
Bill Pope

2
cache:falseはトリックを実行しますが、パフォーマンスにどの程度影響しますか?
FrEaKmAn

$ state.goを$ state.transitionToで変更して状態を変更し、@ ManojGをリロードします
Gery

使用するには新しいライブラリを含める必要があります$stateか?
Ionic

45

おそらく、よりクリーンなアプローチは次のようになります。

<a data-ui-sref="directory.organisations.details" data-ui-sref-opts="{reload: true}">Details State</a>

状態はHTMLからのみ再ロードできます。


7
ui-sref-opts = "{reload: 'child.state'}"を使用して、ページ全体の再読み込みを回避することもできます。「child.state」は実際の状態を表す文字列です。
Michael Fulton




7

まるでページ全体をリロードしたい場合は、$ windowをコントローラーに挿入して、

$window.location.href = '/';

しかし、現在のビューのみをリロードしたい場合は、$ scope、$ state、および$ stateParamsを挿入します(後者は、次のリロードでパラメーターを変更する必要がある場合に備えて、ページ番号のようなものです)。コントローラメソッド:

$stateParams.page = 1;
$state.reload();

AngularJS v1.3.15 angular-ui-router v0.2.15


6

常に機能する愚かな回避策。

$state.go("otherState").then(function(){
     $state.go("wantedState")
});

3

角度v1.2.26の場合、上記のいずれも機能しません。上記のメソッドを呼び出すng-clickは2回クリックする必要があります、状態をリロードするために。

そのため、$ timeoutを使用して2クリックをエミュレートすることになりました。

$provide.decorator('$state',
        ["$delegate", "$stateParams", '$timeout', function ($delegate, $stateParams, $timeout) {
            $delegate.forceReload = function () {
                var reload = function () {
                    $delegate.transitionTo($delegate.current, angular.copy($stateParams), {
                        reload: true,
                        inherit: true,
                        notify: true
                    })
                };
                reload();
                $timeout(reload, 100);
            };
            return $delegate;
        }]);

Navigation.reload()はAngular 1.3.0-rc0で2回のクリックを必要としましたが、transitionTo()は正常に機能しました。この問題がある場合はアップグレードを試してください
2015


3

これらのどれもが私にとってうまくいかなかった理由がわかりません。最終的にそれをしたのは:

$state.reload($state.current.name);

これはAngular 1.4.0でした


2

複数のネストされたビューがあり、目的はコンテンツを1つだけ再ロードすることでした。私はさまざまなアプローチを試しましたが、私のために働いた唯一のことは:

//to reload
$stateParams.reload = !$stateParams.reload; //flip value of reload param
$state.go($state.current, $stateParams);

//state config
$stateProvider
  .state('app.dashboard', {
    url: '/',
    templateUrl: 'app/components/dashboard/dashboard.tmpl.html',
    controller: 'DashboardController',
    controllerAs: 'vm',
    params: {reload: false} //add reload param to a view you want to reload
  });

この場合、必要なビューのみが再ロードされ、キャッシュは引き続き機能します。


trueまたはfalseをリロードします。uはfalseと記載されています。falseは最新の変更でコンテンツをリロードしますか?
行き止まり

2

私はたくさんの答えがあることを知っていますが、ページ全体の更新を引き起こさずにこれを行うために見つけた最善の方法は、更新したいルートにダミーパラメータを作成し、ルートを呼び出すときに、ダミーパラメータへの乱数。

            .state("coverage.check.response", {
                params: { coverageResponse: null, coverageResponseId: 0, updater: 1 },
                views: {
                    "coverageResponse": {
                        templateUrl: "/Scripts/app/coverage/templates/coverageResponse.html",
                        controller: "coverageResponseController",
                        controllerAs: "vm"
                    }
                }
            })

そしてそのルートへの呼び出し

$state.go("coverage.check.response", { coverageResponse: coverage, updater: Math.floor(Math.random() * 100000) + 1 });

チャームのように機能し、解決を処理します。



2

ionic v1を使用している場合、ionicは$ ionicConfigProviderの一部としてテンプレートキャッシングを有効にしているため、上記のソリューションは機能しません。

そのための回避策は少しハッカです-ionic.angular.jsファイルでキャッシュを0に設定する必要があります。

$ionicConfigProvider.views.maxCache(0);

1

私はこの問題に頭を悩ませていました。私のルーティングはJSONファイルから読み取られ、ディレクティブに送られます。UI状態をクリックすることはできましたが、ページを再読み込みできませんでした。だから私の同僚は私にそれのための素晴らしい小さなトリックを示しました。

  1. データを取得する
  2. アプリの設定で読み込み状態を作成します
  3. 行きたい状態をルートスコープに保存します。
  4. app.runで場所を「/ loading」に設定します
  5. ロードコントローラーでルーティングプロミスを解決し、場所を目的のターゲットに設定します。

これでうまくいきました。

それが役に立てば幸い

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.