2017-10-13 1 views
1

Ich habe eine ionische App mit einigen Ansichten, wenn ich die App starte ich werde zu meiner Hauptansicht gehen, wenn der Controller der Ansicht initialisiert wird, werde ich einige Daten laden.ionische Sicht ist nicht im Cache, Controller neu geladen

Das Problem ist, wenn ich aus dieser Ansicht navigieren, mit Registerkarten, ist dieser Controller manchmal zerstört, wenn ich also zurück navigieren müssen die Daten erneut geladen werden.

Ich habe einige Tests mit ‚$ ionicView.loaded‘ und ‚$ ionicView.unloaded‘ getan und es scheint ziemlich zufällig zu sein, wenn die Ansicht entladen wird.

Dies ist mein Zustand Konfiguration

.config(function($stateProvider, $urlRouterProvider) { 

$stateProvider 

    .state('login', { 
    name: "login", 
    url: "/login", 
    templateUrl: "templates/login.html", 
    controller: 'loginCtrl' 
    }) 

    // This is a sidemenu 
    .state('app', { 
    url: '/app', 
    abstract: true, 
    templateUrl: 'templates/menu.html' 
    }) 

    .state('app.hms', { 
    url: '/hms', 
    views: { 
     'menuContent': { 
     templateUrl: 'templates/hms-app.html', 
     controller: 'HmsCtrl' 
     } 
    } 
    }) 

    .state('app.hms-item', { 
    url: '/hms/:hmsId', 
    views: { 
     'menuContent': { 
     templateUrl: 'templates/hms-item.html', 
     controller: 'HmsItemCtrl' 
     } 
    }, 
    params: { 
     item: null 
    } 
    }) 

    .state('app.history', { 
    url: '/history', 
    views: { 
     'menuContent': { 
     templateUrl: 'templates/history-list.html', 
     controller: 'HistoryCtrl' 
     } 
    } 
    }) 
    .state('app.history-item', { 
    url: '/history/:itemId', 
    views: { 
     'menuContent': { 
     templateUrl: 'templates/history-item.html', 
     controller: 'HistoryItemCtrl' 
     } 
    }, 
    params: { 
     itemId: null 
    } 
    }) 

    .state('app.event-new', { 
    url: '/event/new', 
    views: { 
     'menuContent': { 
     templateUrl: 'templates/event-new.html', 
     controller: 'EventCtrl as ctrl' 
     } 
    } 
    }) 

    .state('app.risk-new', { 
    url: '/risk/new', 
    views: { 
     'menuContent': { 
     templateUrl: 'templates/risk-new.html', 
     controller: 'RiskCtrl as ctrl' 
     } 
    } 
    }); 


// if none of the above states are matched, use this as the fallback 
// this is also the first page, 'front page' 
$urlRouterProvider.otherwise('login'); 

}); 

Meine Tabs in jeder .html Vorlage definiert werden Ich brauche sie in (also nicht die Login-Seite, zum Beispiel), sie nach dem Schließen von Ionengehalt definiert werden :

<div class="tabs tabs-icon-top"> 
<a class="tab-item" href="#/app/hms"> 
    <i class="icon ion-home"></i> 
    Home 
</a> 
<a class="tab-item" href="#/app/event/new"> 
    <i class="icon ion-document-text"></i> 
    Hendelse 
</a> 
<a class="tab-item" href="#/app/risk/new"> 
    <i class="icon ion-document-text"></i> 
    Risikorapport 
</a> 
<a class="tab-item" href="#/app/history"> 
    <i class="icon ion-ios-list"></i> 
    Historikk 
</a> 

Was die Steuerung der Ansicht, die dazu führen könnten, zerstört werden, wenn ich von ihm navigieren?

Antwort

1

Es stellt sich heraus, dass Ionic die Zwischenspeicherung für Ansichten entfernt, die "vorwärts" sind. Wenn Sie also von einer Vorwärtsansicht zurück navigieren, wird $ scope zerstört.

unter Caching Des erklärt here

standardmäßig bei der Navigation in der Geschichte zurück, die „Vorwärts“ Ansichten aus dem Cache entfernt. Wenn Sie erneut zur selben Ansicht navigieren, wird ein neues DOM-Element und eine neue Controller-Instanz erstellt. Grundsätzlich werden alle Vorwärtsansichten jedes Mal zurückgesetzt. Dies kann mit dem $ ionicConfigProvider konfiguriert werden:

So Konfigurieren der $ionicConfigProvider mit $ionicConfigProvider.views.forwardCache(true); mein Problem behoben

ich auch sah ich meine Frage eine andere Art und Weise beheben konnte, und das war nicht meine Ansichten zu machen „vorwärts “, wenn sie auf eine neue Ansicht mit href navigieren, können wir was für Ansicht angeben, die nav-direction="swap", indem Sie sein sollte, zur Verfügung Richtungen forward, back, enter, exit, and swap

Beispiel für Register mit Richtung

<a class="tab-item" nav-direction="swap" nav-transition="android" href="#/app/home"> 
    <i class="icon ion-home"></i> 
    Home 
</a> 
Verwandte Themen