web-dev-qa-db-ja.com

現在の状態の再読み込み - データの更新

私はAngular UI Routerを使用していて、現在の状態をリロードしてすべてのデータを更新するか、現在の状態のコントローラーを再実行したいと思います。

私は3つの状態レベルがあります： directory.organisations.details

directory.organisations には、組織のリストを含むテーブルが含まれています。テーブル内の項目をクリックすると、 directory.organisations.details がロードされ、$ StateParamsに項目のIDが渡されます。詳細状態では、このアイテムの詳細をロードし、それらを編集してからデータを保存します。これまでのところすべて大丈夫です。

今度はこの状態をリロードしてすべてのデータをリフレッシュする必要があります。

私が試してみました：

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

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

私も試してみました：

$state.reload()

私はこれを$ state.reloadのAPI WIKIで確認しました。

任意の助けは大歓迎ですか？

angularjsangular-uiangular-ui-router
315
Holland Risley

この解決策はAngularJS V.1.2.2で機能します。

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

私はこれがUIルータでリフレッシュするための最短の作業方法であることがわかりました：

$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

539
Rohan

それが最終的な解決策になります。 （@ 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();
67
M K

イオンフレームワーク用

$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

56
RouR

おそらく、よりクリーンな方法は次のようになります。

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

HTMLからのみ状態をリロードできます。

44
Vaibhav Pachauri

@Holland Risleyの回答が最新のui-routerのapiとして利用可能になりました。

$state.reload();

現在の状態を強制的にリロードするメソッド。すべての解決は再解決され、コントローラは再インスタンス化され、イベントは再起動されます。

http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state

19
Muthukannan Kanniappan
$state.go($state.current, $stateParams, {reload: true, inherit: false});
15
Weston Ganger
$scope.reloadstat = function () { $state.go($state.current, {}, {reload: true}); };
9
user7961355

ページ全体をリロードしたい場合は、$ windowをコントローラに挿入してから呼び出します。

$window.location.href = '/';

しかし、現在のビューだけをリロードしたいのであれば、$ scope、$ state、$ stateParamsをインジェクションします（このリロードでいくつかのパラメータを変更する必要がある場合のために、後者）コントローラメソッド：

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

AngularJS v1.3.15角度UIルータv0.2.15

6
MarcoSantana

常にうまくいく愚かな回避策。

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

私のためにすべてが失敗しました。うまくいったことは…cache-view = "false"をビューに追加することだけです。

今月の号から https://github.com/angular-ui/ui-router/issues/582

2
Hans

なぜこれらのどれもが私のために働かないように見えなかったのかわからない。最後にやったのは、

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

これはAngular 1.4.0の場合

2
BarrySW19

角度v1.2.26の場合、上記のいずれも機能しません。上記のメソッドを呼び出すクリックは、状態をリロードするために 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;
        }]);
2
thanos panousis

@Rohan answer https://stackoverflow.com/a/23609343/3297761 を使用できます。

しかし、ビューの変更後に各コントローラをリアルロードしたい場合は、次のようにします。

myApp.config(function($ionicConfigProvider) { $ionicConfigProvider.views.maxCache(0); ... }
1
EduLopez

私は複数のネストしたビューを持っていましたが、目的はコンテンツを含むビューだけをリロードすることでした。私はさまざまな方法を試してみましたが、うまくいったことはそれだけです。

//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
  });

この場合、必要なビューだけがリロードされ、キャッシュは機能します。

1
Dmitriy Nevzorov

私はたくさんの答えがあったことを知っています、しかし私が全ページ更新を引き起こさずにこれをすることを発見した最良の方法は私が更新したい経路にダミーのパラメータを作成することです。ダミーパラメータへの乱数.

            .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 });

魅力のように動作し、解決を処理します。

1
ewahner

イオン性v1を使用している場合は、上記の解決法は、$ionicConfigProviderの一部としてイオン性がテンプレートキャッシングを有効にしているため機能しません。

それを回避するには少々手間がかかります - ion.angular.jsファイルでcacheを0に設定する必要があります。

$ionicConfigProvider.views.maxCache(0);
0
Maksood

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

  1. データを入手する
  2. アプリの設定で、読み込み状態を作成します
  3. 行きたい状態をルーツスコープに保存します。
  4. App.runで場所を "/ loading"に設定します
  5. ローディングコントローラでルーティングの約束を解決してから、目的のターゲットに場所を設定します。

これは私のために働きました。

それが役に立てば幸い

0
Evan Burbidge