我的基本HTML非常简单：
<body ng-app="checkinApp" ng-controller="GlobalCtrl">
<nav-view></nav-view>
</body>
这是相关屏幕的路由配置：
app.config(function($stateProvider,$urlRouterProvider) {
$stateProvider
.state('event',{
url: "/event",templateUrl: "templates/event.html",controller: "MainCtrl"
})
.state('event.chooseEvent',{
url: "/choose",templateUrl: "templates/chooseEvent.html",controller: "MainCtrl"
})
.state('event.eventCheckin',{
url: "/checkin",templateUrl: "templates/eventCheckin.html",controller: "MainCtrl"
});
// if none of the above are matched,go to this one
$urlRouterProvider.otherwise("/event/choose");
});
只需使用上述路由配置启动应用程序就会导致错误,无需其他交互.
以下是我的看法……
event.html：
请注意< nav-view>< / nav-view>块,我期望子视图呈现.
<side-menus>
<!-- page content -->
<pane side-menu-content>
<header class="bar bar-header bar-positive">
<button class="button button-icon icon ion-navicon" ng-click="toggleMenu()"></button>
<h1 class="title">Checkin</h1>
</header>
<nav-view></nav-view>
</pane>
<side-menu side="left">
<content>navigation menu content here</content>
</side-menu>
</side-menus>
eventCheckin.html：
<content has-header="true" on-refresh="refreshAttendees()">
<!-- for pull to refresh -->
<refresher></refresher>
<ul class="list">
<li
ng-repeat="person in attendees | orderBy:'firstname' | orderBy:'lastname'"
item="person"
class="item item-toggle"
>
{{person.lastname}},{{person.firstname}}
<label class="toggle">
<input type="checkBox" ng-checked="person.arrived" ng-click="toggleArrived(person)" />
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
</ul>
</content>
chooseEvent.html：
<div><br/><br/><br/>Swipe right to choose an Event</div>
有一点需要指出的是,eventmenu状态有abstract：true,因为side菜单本身不是它自己的视图,而是视图的容器.
An abstract state can have child states but can not get activated itself. An ‘abstract’ state is simply a state that can’t be transitioned to. It is activated implicitly when one of its descendants are activated.
https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#wiki-abstract-states
下面是使用侧面菜单的抽象状态的示例.
$stateProvider
.state('eventmenu',abstract: true,templateUrl: "event-menu.html"
})
.state('eventmenu.home',{
url: "/home",views: {
'menuContent' :{
templateUrl: "home.html"
}
}
})
.state('eventmenu.checkin',{
url: "/check-in",views: {
'menuContent' :{
templateUrl: "check-in.html",controller: "CheckinCtrl"
}
}
})
.state('eventmenu.attendees',{
url: "/attendees",views: {
'menuContent' :{
templateUrl: "attendees.html",controller: "AttendeesCtrl"
}
}
})
对于标记,主< nav-view>是在身体的根部,< nav-bar>在< pane side-menu-content>内.请注意,Ionic使用< nav-view>而不是Angular UI路由器的< ui-view>因为Ionic的navView指令带有内置的导航和动画系统.
接下来,event-menu.html(这是一个抽象状态)有一个名为menuContent的子navView指令,这是所有其他状态将其视图插入的位置.
<div ng-controller="MainCtrl">
<nav-view></nav-view>
</div>
<script id="event-menu.html" type="text/ng-template">
<side-menus>
<pane side-menu-content>
<nav-bar type="bar-positive"
back-button-type="button-icon"
back-button-icon="ion-ios7-arrow-back"></nav-bar>
<nav-view name="menuContent"></nav-view>
</pane>
<side-menu side="left">
<header class="bar bar-header bar-assertive">
<div class="title">Left Menu</div>
</header>
<content has-header="true">
<ul class="list">
<a href="#/event/check-in" class="item">Check-in</a>
<a href="#/event/attendees" class="item">Attendees</a>
</ul>
</content>
</side-menu>
</side-menus>
</script>
我在这里整理了一个快速的代码：
http://codepen.io/ionic/pen/EtbrF
此外,在编写本文时,codepen使用每晚构建,因为您的演示的某些要求尚未发布.
希望有所帮助！
