Szablon nie aktualizuje przy użyciu UI-router i jonów-zaczepy

Question

KOD

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

Mam dwóch stron (link1 i link2) z menu bocznego. Każda strona ma 2 karty:

link1: tab 1.1 i tab 1.2

link2: tab 2.1 i tab 2.2

używam ion-tabs dla każdej strony zawiera 2 karty.

To bardzo prosty projekt: chcę kliknąć na link1 lub link2, aby przejść do odpowiedniej trasy. Ale z jakiegoś powodu stan został zmieniony poprawnie (patrz konsola), ale faktyczny szablon html nie został zaktualizowany. Czy możesz dowiedzieć się, co jest nie tak i jak je naprawić?

Wydaje się, że istnieje problem z buforowaniem lub coś takiego.

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

Aktualnie odnosząc się do najnowszej wersji, która jest 1.0.0-rc.0 który ma błąd podczas przejścia z jednego stanu do drugiego, to nie ładuje się widokiem.

Dalsze badania wykazały, że miały 14 wersji beta od wersji 1.0.0-beta.1 do 1.0.0-beta.14 po tym, jak są teraz w wersji 1.0.0-rc.0, która jest kandydatem do wydania.

nav-view pracuje idealny do 1.0.0-beta.13 wersji, ale nie działają po 1.0.0-beta.14 (co jest ostatnia wersja beta),

Proponuję degradować wersję do 1.0.0-beta.13, wiem, w zależności od wersji beta nie jest dobrą rzeczą ale do czasu stabilizacji wersji jonowej musisz na niej polegać.

Working Codepen z 1.0.0-beta.13

UPDATE:

problem jest Pana pogląd są coraz buforowane ponieważ domyślnie włączone jest buforowanie wewnątrz jonowego aplikacji.

Prosto z Ionic Doc (dok najnowszej wersji 1.0.0-beta.14)

Domyślnie, widoki są buforowane w celu zwiększenia wydajności. Gdy widok jest przesuwany, jego element pozostaje w DOM, a jego zasięg to odłączony od cyklu $ watch. Podczas nawigacji do widoku, który jest już buforowany, jego zakres jest następnie ponownie łączony, a istniejący element pozostawiony w modelu DOM staje się widokiem aktywnym. To również pozwala na stanowisko przewijania dotychczasowych poglądów być maintained.Maximum zdolność widzenia buforowania jest 10.

Więc przez wymienienie funkcjonować cache: false na $stateProvider stany lub wyłączyć pamięć podręczną nav-view globalnie wykonując $ionicConfigProvider.views.maxCache(0); wewnątrz kanciasty faza konfiguracji.

Więc w twoim przypadku to właśnie dokładny problemu, 1st widok jest coraz cache & pokazując go ponownie & ponownie

Istnieją 3 sposoby rozwiązania tego problemu

1. Wyłącz cache globalnie

Wyłącz wszystkie buforowanie, ustawiając je na 0, przed użyciem dodaj zależność $ionicConfigProvider.

$ionicConfigProvider.views.maxCache(0); 

Codepen

2. Wyłącz cache w zasięgu operatora państwowego

$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. Wyłącz cache z atrybutem

<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

wierzę zaktualizowane podejście byłoby świetnie do wdrożenia. Dzięki.

Github problem dla tej samej kwestii link here