码
我在侧面菜单中有两页(link1和link2)。每个页面都有2个标签:
link1
link2
link1:tab 1.1和tab 1.2
tab 1.1
tab 1.2
link2:tab 2.1和tab 2.2
tab 2.1
tab 2.2
我正在使用ion-tabs每个页面包含2个选项卡。
ion-tabs
这是一个非常简单的设计:我想单击link1或link2转到适当的路线。但是由于某种原因,状态已正确更改(请参阅控制台),但实际的html模板未更新。 您能找出问题所在以及如何解决吗?
似乎存在一些缓存问题或其他问题。
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); }); }])
您当前指的是最新版本,1.0.0-rc.0该版本在从一种状态转换为另一种状态时存在错误,并且未加载视图。
1.0.0-rc.0
进一步的研究发现,从候选版本1.0.0-beta.1到1.0.0-beta.14现在,他们已经有14个beta版本1.0.0-rc.0。
1.0.0-beta.1
1.0.0-beta.14
nav-view直到1.0.0-beta.13版本都可以正常使用,但是直到1.0.0-beta.14最后一个beta 版本才停止工作,
nav-view
1.0.0-beta.13
我建议您将您的版本降级为1.0.0-beta.13,我知道依赖beta版本不是一件好事,但直到离子发布稳定版本之前,您都必须依靠它。
工作Codepen 与1.0.0-beta.13
更新:
您的问题是您的视图正在被缓存,因为默认情况下,您的ionic应用程序中启用了缓存。
直接来自IonicDoc(最新版本doc1.0.0-beta.14)
默认情况下,将缓存视图以提高性能。离开视图时,其元素保留在DOM中,并且其作用域与$ watch循环断开连接。导航到已缓存的视图时,其范围将重新连接,并且DOM中剩余的现有元素将成为活动视图。这也可以保持先前视图的滚动位置。缓存视图的最大容量为10。
因此,通过cache:false在$stateProvider状态$ionicConfigProvider.views.maxCache(0);配置阶段执行状态功能或全局禁用导航视图的缓存,就可以了。
cache:false
$stateProvider
$ionicConfigProvider.views.maxCache(0);
因此,在您的情况下,这就是确切的问题,您的第一个视图正在获取缓存并再次显示
有3种方法可以解决此问题
1.全局禁用缓存
通过将其设置为0来禁用所有缓存,然后再使用它来添加$ionicConfigProvider依赖项。
$ionicConfigProvider
Codepen
2.禁用状态提供程序中的缓存
$stateProvider .state('link1', { url: "/link1", cache: false, views: { 'menuContent': { templateUrl: "link1.html" } } }) .state('link2', { url: "/link2", cache: false, views: { 'menuContent': { templateUrl: "link2.html" } } });
3.禁用具有属性的缓存
<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>
我相信更新的方法将非常适合实施。谢谢。