Ada*_*tle 8 angularjs angular-ui-router ionic-framework
我正在使用最新版本的IonicFramework,它使用了引擎盖下的angular-ui-router 0.2.8.这是我第一次使用ui-router所以我可能犯了一个愚蠢的错误,但我无法弄清楚它是什么.当我导航到我刚刚添加的新状态/视图集时,出现"超出最大调用堆栈大小"错误,Chrome选项卡崩溃.
我的基本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>
除了调用堆栈无限递归,我在控制台中没有收到任何其他错误.知道我做错了什么吗？
您的示例帮助指出了navView指令中的错误.我已经把修复程序放在我们下一个版本中的每晚构建中.
需要指出的一点是,eventmenu状态有abstract: true,因为侧面菜单本身不是它自己的视图,而是视图的容器.
抽象状态可以具有子状态但不能自动激活."抽象"状态只是一个无法转换的状态.当其中一个后代被激活时,它会被隐式激活.
https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#wiki-abstract-states
下面是使用侧面菜单的抽象状态的示例.
$stateProvider
.state('eventmenu', {
url: "/event",
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 Router,<ui-view>因为Ionic的navView指令带有内置的导航和动画系统.
接下来,event-menu.html(这是一个抽象状态),有一个名为的子navView指令menuContent,这是所有其他状态将其视图插入的位置.
<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使用每晚构建,因为您的演示的某些要求尚未发布.
希望有所帮助!
| 归档时间： |
|
| 查看次数： |
4724 次 |
| 最近记录： |