我正在开发具有以下布局的Ionic应用程序:
我为此部分设置了以下ui-router状态:
$stateProvider
.state('home', {
name: 'home',
url: '',
abstract: true,
templateUrl: "templates/base.html"
})
.state('home.map', {
url: "/main",
cache: false,
views: {
'second': {
templateUrl: 'templates/map.html',
controller: 'mapCtrl'
}
}
})
.state('home.list', {
url: '/list',
cache: false,
views: {
'second': {
templateUrl: 'templates/list.html',
controller: 'listCtrl'
}
}
})
.state('home.deals', {
url: '/deals',
cache: false,
views: {
'second': {
templateUrl: 'templates/deals.html',
controller: 'dealsCtrl'
}
}
})

当通过Web浏览器在标题视图中使用以下控件切换状态时,这非常有用:
<div class="col-33 mapPageColPadding">
<button ui-sref="home.map" ng-class = "{active: isActive('/main'), mapPageBottomHeaderButtons: true}">MAP</button>
</div>
<div class="col-33 mapPageColPadding">
<button ui-sref="home.list" ng-class = "{active: isActive('/list'), mapPageBottomHeaderButtons: true}">LIST</button>
</div>
<div class="col-33 mapPageColPadding">
<button ui-sref="home.deals" ng-class = "{active: isActive('/deals'), mapPageBottomHeaderButtons: true}">DEALS</button>
</div>
&#13;
这是我的base.html:
<ion-content scroll="true">
<div ng-include src="'templates/partialCustomHeader.html'"></div>
<div ui-view="second"></div>
</ion-content>
&#13;
这是地图视图,非常简单:
<ion-content overflow-scroll="true" padding="false" class="myPageHasHeader animationLeft">
<div id="map" data-tap-disabled="true"></div>
</ion-content>
&#13;
问题是在Android设备上运行时(我还没有测试过IOS)我在这个案例图中正确加载了第一个视图。但是当点击控制器激活的任何菜单选项时(通过我可以告诉的日志),但屏幕仍然显示地图。如果我点击最终菜单选项,应用程序将直观更新以显示第二个视图,但下一个控制器将激活。
更奇怪的是,当使用chrome检查器时,它会显示在Android手机上导航的视图。甚至可以适当地更新拖动和移动。
我觉得问题是渲染不会被刷新或更新,只有在点击另一个状态更改项目时才会更新为其后面的一个。我已禁用所有动画以确保不存在问题。
编辑:这是一个有效的编写工具,可以显示我想要做的事情:http://codepen.io/anon/pen/XdRLag