javascript - example - ui router ui sref



Il modello non si aggiorna quando si utilizzano ui-router e schede ion (1)

CODICE

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

Ho due pagine ( link1 e link2 ) dal menu laterale. Ogni pagina ha 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 per contenere le 2 schede.

Questo è un progetto molto semplice: voglio cliccare sul 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. Riesci a scoprire cosa c'è di sbagliato e come risolvere?

Sembra che ci sia qualche problema di 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);
  });

}])

Attualmente ti stai riferendo all'ultima versione 1.0.0-rc.0 che ha un bug durante la transizione da uno stato all'altro non sta caricando la vista.

Ulteriori ricerche hanno scoperto che, hanno rilasciato 14 versioni beta dalla versione 1.0.0-beta.1 alla 1.0.0-beta.14 dopo che sono ora sulla versione 1.0.0-rc.0 che è la release candidate.

nav-view funziona perfettamente fino 1.0.0-beta.13 versione 1.0.0-beta.13 ma smette di funzionare dopo 1.0.0-beta.14 (che è l'ultima versione beta),

Ti suggerirei di degradare la tua versione a 1.0.0-beta.13 , so che a seconda della versione beta non è una buona cosa, ma fino alla versione stabile con rilascio ionico devi fare affidamento su di essa.

Codepen funzionante con 1.0.0-beta.13

Aggiornare:

Il tuo problema è che la tua vista viene messa in cache perché per impostazione predefinita la memorizzazione nella cache è abilitata all'interno della tua app ionica.

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

Per impostazione predefinita, le viste vengono memorizzate nella cache per migliorare le prestazioni. Quando una vista viene allontanata da, il suo elemento viene lasciato nel DOM e il suo ambito viene disconnesso dal ciclo $ watch. Quando si naviga verso 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. Ciò consente anche di mantenere la posizione di scorrimento delle viste precedenti. La capacità massima della vista di memorizzazione nella cache è 10.

Quindi menzionando cache: false su $stateProvider afferma la funzione o disabilita la cache di nav-view globalmente facendo $ionicConfigProvider.views.maxCache(0); all'interno della fase di configurazione angolare.

Quindi nel tuo caso questo è il problema esatto, la tua prima visione è ottenere la cache e mostrarla di nuovo e di nuovo

Ci sono 3 modi per risolvere questo problema

1. Disabilita la cache globalmente

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

$ionicConfigProvider.views.maxCache(0);

Codepen

2. Disabilitare la cache all'interno del provider di 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 ottimo da implementare. Grazie.

Il problema Github per lo stesso problema è disponibile qui





ionic-framework