Le modèle ne se met pas à jour lorsque vous utilisez ui-router et ion-tabs
CODE
http://codepen.io/hawkphil/pen/LEBNVB
J'ai deux pages (link1
et link2
) à partir du menu latéral. Chaque page dispose de 2 onglets:
link1
: tab 1.1
et tab 1.2
link2
: tab 2.1
et tab 2.2
Je suis en utilisant ion-tabs
de chaque page afin de contenir les 2 onglets.
C'est une conception très simple: j'ai envie de cliquer sur le link1
ou link2
pour aller à la route appropriée. Mais pour une raison quelconque, l'état a changé correctement (voir la Console), mais le modèle html n'a pas mis à jour. Pouvez-vous savoir quel est le problème et comment le résoudre?
Il semble y avoir un problème de mise en cache ou quelque chose.
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);
});
}])
source d'informationauteur HP.
Vous devez vous connecter pour publier un commentaire.
Vous êtes actuellement en se référant à la dernière version qui est
1.0.0-rc.0
qui a un bug lors du passage d'un état à un autre, c'est pas le chargement de la vue.Davantage de recherche, a trouvé qu'ils avaient 14 versions bêta de la version
1.0.0-beta.1
à1.0.0-beta.14
après, ils sont maintenant sur la version1.0.0-rc.0
qui est en release candidate.nav-view
de travail est parfait jusqu'à1.0.0-beta.13
version, mais il arrêter de travailler après1.0.0-beta.14
(qui est la dernière version bêta),Je vous suggère de dégrader votre version de
1.0.0-beta.13
je sais que selon la version beta n'est pas une bonne chose, mais encore jusqu'à ce ionique version stable, la version que vous devez compter sur elle.Travail Codepen avec
1.0.0-beta.13
Mise à jour:
Votre problème est votre point de vue sont la mise en cache car, par défaut, la mise en cache est activé à l'intérieur de votre ionique app.
Directement à partir de Ionique Doc (Dernière Version doc 1.0.0-bêta.14)
Donc, en mentionnant
cache: false
sur$stateProvider
fonction des états ou de la désactivation du cache de nav-vue à l'échelle mondiale en faisant$ionicConfigProvider.views.maxCache(0);
à l'intérieur angulaire de l'étape de configuration.Si dans votre cas, c'est ce problème précis, votre 1ère vue est prise en cache & montrant encore & encore
Il y a 3 façons de résoudre ce problème
1. Désactiver le cache à l'échelle mondiale
Désactiver la mise en cache par la valeur 0, avant de l'utiliser ajouter
$ionicConfigProvider
de dépendance.Codepen
2. Désactiver le cache au sein de l'état fournisseur de
Codepen
3. Désactiver le cache avec un attribut
Codepen
Je crois que l'approche mise à jour serait bien de mettre en œuvre. Merci.
Github question pour le même problème lien ici