Template non viene aggiornato quando si utilizza ui-router e schede di ioni

Question

CODICE

http://codepen.io/hawkphil/pen/LEBNVB

Ho due pagine (link1 e link2) dal menu laterale. Ogni pagina dispone di 2 schede:

link1: tab 1.1 e tab 1.2

link2: tab 2.1 e tab 2.2

Sto usando ion-tabs per ogni pagina a contenere le 2 schede.

Questo è un progetto molto semplice: voglio fare clic su link1 o link2 per andare al percorso appropriato. Ma per qualche ragione, lo stato è cambiato correttamente (vedi Console) ma il modello html non è stato aggiornato. Puoi scoprire cosa c'è di sbagliato e come risolvere?

Sembra esserci qualche problema di memorizzazione nella cache o qualcosa del genere.

HTML

<title>Tabs Example</title> 

<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> 
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> 

<ion-side-menus enable-menu-with-back-views="false"> 
    <ion-side-menu-content> 
    <ion-nav-bar class="bar-positive"> 
     <ion-nav-back-button> 
     </ion-nav-back-button> 

     <ion-nav-buttons side="left"> 
     <button class="button button-icon button-clear ion-navicon" menu-toggle="left"> 
     </button> 
     </ion-nav-buttons> 
     <ion-nav-buttons side="right"> 
     <button class="button button-icon button-clear ion-navicon" menu-toggle="right"> 
     </button> 
     </ion-nav-buttons> 
    </ion-nav-bar> 
    <ion-nav-view name="menuContent"></ion-nav-view> 
    </ion-side-menu-content> 

    <ion-side-menu side="left"> 
    <ion-header-bar class="bar-balanced"> 
     <h1 class="title">Left</h1> 
    </ion-header-bar> 
    <ion-content> 
     <ion-list> 
     <ion-item nav-clear menu-close ui-sref="link1"> 
      Link 1 
     </ion-item> 
     <ion-item nav-clear menu-close ui-sref="link2"> 
      Link 2 
     </ion-item> 
     </ion-list> 
    </ion-content> 
    </ion-side-menu> 

    <ion-side-menu side="right"> 
    <ion-header-bar class="bar-calm"> 
     <h1 class="title">Right Menu</h1> 
    </ion-header-bar> 
    <ion-content> 
     <div class="list list-inset"> 
     <label class="item item-input"> 
      <i class="icon ion-search placeholder-icon"></i> 
      <input type="text" placeholder="Search"> 
     </label> 
     </div> 
     <div class="list"> 
     <a class="item item-avatar" href="#"> 
      <img src="img/avatar1.jpg"> 
      <h2>Venkman</h2> 
      <p>Back off, man. I'm a scientist.</p> 
     </a> 
     </div> 
    </ion-content> 
    </ion-side-menu> 
    </ion-side-menus> 
</ion-side-menus> 

<script id="link1.html" type="text/ng-template"> 
    <ion-tabs class="tabs-icon-top tabs-positive"> 

    <ion-tab title="Home" icon="ion-home"> 
     <ion-view view-title="Home"> 
     <ion-content has-header="true" has-tabs="true" padding="true"> 
      <p>Test</p> 
      <p>Test Tab 1.1</p> 
     </ion-content> 
     </ion-view>   
    </ion-tab> 

    <ion-tab title="About" icon="ion-ios-information"> 
     <ion-view view-title="Home"> 
     <ion-content has-header="true" has-tabs="true" padding="true"> 
      <p>Test</p> 
      <p>Test Tab 1.2</p> 
     </ion-content> 
     </ion-view> 
    </ion-tab> 

    </ion-tabs> 
</script> 

<script id="link2.html" type="text/ng-template"> 
    <ion-tabs class="tabs-icon-top tabs-positive"> 

    <ion-tab title="Home" icon="ion-home"> 
     <ion-view view-title="Home"> 
     <ion-content has-header="true" has-tabs="true" padding="true"> 
      <p>Test</p> 
      <p>Test Tab 2.1</p> 
     </ion-content> 
     </ion-view>   
    </ion-tab> 

    <ion-tab title="About" icon="ion-ios-information"> 
     <ion-view view-title="Home"> 
     <ion-content has-header="true" has-tabs="true" padding="true"> 
      <p>Test</p> 
      <p>Test Tab 2.2</p> 
     </ion-content> 
     </ion-view> 
    </ion-tab> 

    </ion-tabs> 
</script> 

JS

angular.module('ionicApp', ['ionic']) 

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

    $stateProvider 
    .state('link1', { 
     url: "/link1", 
     views: { 
     'menuContent': { 
      templateUrl: "link1.html" 
     } 
     } 
    }) 
    .state('link2', { 
     url: "/link2", 
     views: { 
     'menuContent': { 
      templateUrl: "link2.html" 
     } 
     } 
    }); 

    $urlRouterProvider.otherwise("/link1"); 

}) 

.controller('AppCtrl', ['$scope', '$rootScope', '$state', '$stateParams', function($scope, $rootScope, $state, $stateParams) { 

    $rootScope.$on('$stateChangeSuccess', function(evt, toState, toParams, fromState, fromParams) { 
    console.log(toState); 
    }); 

}]) 

Answer 1

State attualmente riferisce alla versione più recente che è 1.0.0-rc.0 che ha bug, mentre la transizione da uno stato all'altro non sta caricando la vista.

Ulteriori ricerche hanno rilevato che, hanno rilasciato 14 versioni beta dalla versione 1.0.0-beta.1 a 1.0.0-beta.14 dopo che sono ora nella versione 1.0.0-rc.0 che è stata rilasciata.

nav-view sta lavorando perfetta fino 1.0.0-beta.13 versione ma smettere di funzionare dopo 1.0.0-beta.14 (che è l'ultima beta release),

Vorrei suggerire a degradare la versione a 1.0.0-beta.13, che conosco a seconda della versione beta non è buona cosa ma ancora fino alla versione stabile di rilascio ionico devi fare affidamento su di esso.

Working Codepen con 1.0.0-beta.13

Aggiornamento:

Il tuo problema è la sua opinione sono sempre memorizzati nella cache perché per la cache di default è attivata all'interno della vostra app ionico.

Direttamente dal Ionic Doc (Ultima versione doc 1.0.0-beta.14)

Per impostazione predefinita, le viste sono memorizzati nella cache per migliorare le prestazioni. Quando una vista è allontanata da , il suo elemento è lasciato nel DOM e il suo ambito è disconnesso dal ciclo $ watch. Quando si naviga in una vista che è già stata memorizzata nella cache , il suo ambito viene quindi ricollegato e l'elemento esistente lasciato nel DOM diventa la vista attiva. Questo anche permette la posizione di scorrimento viste precedenti essere capacità maintained.Maximum di vista cache è 10.

Così menzionando funzionano cache: false su $stateProvider stati o disabilitazione della cache di nav-view globalmente facendo $ionicConfigProvider.views.maxCache(0); all'interno angolare fase di configurazione.

Quindi nel tuo caso questo è ciò problema esatto, la vostra prima vista è sempre la cache & mostrando di nuovo & ancora

Ci sono 3 modi per risolvere questo problema

1. Disabilitare la cache a livello globale

Disabilitare tutto il caching impostandolo su 0, prima di utilizzarlo aggiungi la dipendenza $ionicConfigProvider.

$ionicConfigProvider.views.maxCache(0); 

Codepen

2. cache di Disable all'interno erogatori stato

$stateProvider 
.state('link1', { 
    url: "/link1", 
    cache: false, 
    views: { 
    'menuContent': { 
     templateUrl: "link1.html" 
    } 
    } 
}) 
.state('link2', { 
    url: "/link2", 
    cache: false, 
    views: { 
    'menuContent': { 
     templateUrl: "link2.html" 
    } 
    } 
}); 

Codepen

3. Disabilitare la cache con un attributo

<ion-tab title="Home" icon="ion-home"> 
     <ion-view cache-view="false" view-title="Home"> 
     <!-- Ion content here --> 
     </ion-view>   
    </ion-tab> 

    <ion-tab title="About" icon="ion-ios-information"> 
     <ion-view cache-view="false" view-title="Home"> 
     <!-- Ion content here --> 
     </ion-view> 
    </ion-tab> 

Codepen

credo che l'approccio aggiornato sarebbe grande da implementare. Grazie.

problema Github per lo stesso problema link here