web-dev-qa-db-ja.com

Ionic-戻るボタンをクリックすると、新しいデータをリロードしてng-repeatで表示します

バックグラウンド

詳細ページ（戻るボタンがあります）に移動する_ng-repeat_リストがあります。 _$scope.items_変数は、ページが最初にロードされたときに発生するgetリクエストから、私のrefreshItems()関数を使用してロードされます。

問題

詳細ページの[戻る]ボタンをクリックすると、正しいページに戻りますが、リストはnot更新されます。新しいアイテムが読み込まれて表示されるように、このリストを更新する必要があります。

試みられた解決策

戻るボタンをionicHistoryを使用して戻る_ng-click_関数に接続し、refreshItems()関数を呼び出すだけでよいと思いました。ただし、これは最初のページのアイテムをリロードしません。

上記の試みは最後のページに戻りますそしてrefreshItems()関数（および新しいデータが読み込まれます。これはconsole.log()ステートメントのおかげでわかります）が、ng-repeatを再構築する必要があると思います。 $scope.$apply()と$route.reload()に関する情報をいくつか見つけましたが、goBack()関数の最後に配置したときに、どちらも問題を修正しませんでした。

コードの抜粋

controller.js

_$scope.refreshItems = function() {

    console.log("Refreshing items!");

    $http.get('http://domain/page.aspx').then(function(resp) {
        $scope.items = resp.data; console.log('[Items] Success', resp.data);
    }, function(err) { console.error('ERR', err); });

};


$scope.goBack = function() {
    $ionicHistory.goBack();
    $scope.refreshItems();
};
_

メインページのHTML

_<div class="list">

    <a ng-repeat="i in items" class="item" href="#/tab/details?ID={{i.Item_ID}}">
        <b>Item {{i.Item_Name}}</b>
    </a>

</div>
_

詳細ページの戻るボタン

_<ion-nav-bar>
    <ion-nav-back-button class="button-clear" ng-click="goBack();">
        <i class="ion-arrow-left-c"></i> Back
    </ion-nav-back-button>
</ion-nav-bar>
_

可能な方向？

メインページにrefreshItems()を呼び出すrefresherがあり、正しく更新されます。問題は、リフレッシュを$ionicHistory.goBack()または$state.go()のいずれかとペアリングしようとしたときに最も確実に発生します。リフレッシャーが呼び出している関数を直接呼び出すことは機能しないため、プログラムでリフレッシャーを呼び出す方法はありますか（ロード後/ロード時）？

angularjsangularjs-ng-repeationic-frameworkangularjs-routingionic
9
Chad

私はこれに対する解決策を見つけました！

解決策は、$scope.$on('$stateChangeSuccess')関数を使用することです。関数パラメーターを使用してto/fromビューを確認するか、$location.path()を使用します。

$scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {

    console.log("State changed: ", toState);

    if ($location.path() == "/tab/main") {
        $scope.refreshItems();
    }

}
2
Chad

ionicConfigProviderにキャッシュフラグを設定します。次のように、状態プロバイダー内のキャッシュを無効にします。

$stateProvider.state('mainPage', {
   cache: false,
   url : '/dashboard',
   templateUrl : 'dashboard.html'
})

詳細については、 手動 を参照してください。

29
9nix00

すべてのIonicビューは cached ;次のようにキャッシュを防止します：

cache-view="false"

例えば：

<ion-view view-title="Title" cache-view="false">
10
Toxus

詳細ページからイベントをブロードキャストし、リストコントローラーでこのイベントをリッスンすることもできます。

http://www.dotnet-tricks.com/Tutorial/angularjs/HM0L291214

1
gilles_yvetot