Ionique - Rechargez et afficher les nouvelles données en ng-repeat lors d'un clic de bouton de retour

Fond

J'ai un ng-repeat liste qui va à une page de détails (qui a un bouton de retour). Le $scope.items variable est chargé à partir d'une requête get qui se produit lorsque la page est chargée pour la première fois, avec mon refreshItems() fonction.

Le Problème

Lorsque vous cliquez sur le bouton de retour sur la page de détails, vous êtes redirigé vers la bonne page, mais la liste est pas actualisé. J'ai besoin de cette liste à l'actualisation ainsi, les nouveaux éléments sont chargés et affichés.

Tentative De Solution

J'ai pensé que je pouvais, il suffit de raccorder le bouton Retour pour une ng-click fonction qui utilise ionicHistory pour revenir en arrière, puis appelle mon refreshItems() fonction; toutefois, cela ne permet pas de recharger les articles sur la première page.

Ci-dessus tentative ne revenir à la dernière page et déclencher la refreshItems() fonction (et les nouvelles données sont chargées, je peux voir grâce à console.log() états), mais je devine le ng-repeat doit être reconstruit. J'ai trouvé quelques informations sur $scope.$apply() ainsi que $route.reload() mais aucun de ces correction d'un problème lorsque je les ai placés à la fin de mon goBack() fonction.

Extraits De Code

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

Principal de la Page 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>

Bouton de retour sur la Page de Détails de

<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>

Orientation Possible?

J'ai un refresher sur la page principale qui appelle refreshItems() - et il rafraîchit correctement. Le problème est très certainement lorsque j'essaie de paire rafraîchissant avec soit $ionicHistory.goBack() ou $state.go(). Est il possible que je peux appeler par programmation de la mise à jour (après/sur la charge), directement depuis l'appel de la fonction de recyclage de l'appelant ne fonctionne pas?

OriginalL'auteur Chad | 2015-03-09

29

Définir le cache drapeau dans ionicConfigProvider. Désactiver le cache à l'intérieur de fournisseur d'état comme suit:
```
$stateProvider.state('mainPage', {
   cache: false,
   url : '/dashboard',
   templateUrl : 'dashboard.html'
})
```
Voir le manuel pour plus de détails.

OriginalL'auteur 9nix00
10

Tous Ionique vues sont mis en cache; empêcher la mise en cache comme suit:
```
cache-view="false"
```
Par exemple:
```
<ion-view view-title="Title" cache-view="false">
```
OriginalL'auteur Toxus

J'ai trouvé une solution pour ce!

La solution est d'utiliser la $scope.$on('$stateChangeSuccess') fonction. Vérifiez le vers/à partir de l'affichage avec les paramètres de la fonction, ou l'utilisation $location.path():

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

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

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

}

OriginalL'auteur Chad

1

Vous pouvez également diffuser un événement à partir de la page de détail et écouter cet événement dans la liste contrôleur.

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

Je ne serais pas surpris si cela est signalé comme un link-seule réponse. Il aide la communauté plus, si vous expliquez votre solution et d'inclure des extraits de code.

OriginalL'auteur gilles_yvetot

Vous devez vous connecter pour publier un commentaire.