我在 ionic 框架中有一个应用程序,大部分使用选项卡示例。但是在其中一个 View 中,我希望用户能够单击一个项目并进入基于该项目的另一个 View 。
但是,无论何时单击某个项目,它都会加载正确的 View ,但不会调用该 View 的模板文件。
这是我的路由器中的内容(注意不相关的部分被遗漏了)
$stateProvider.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
}).state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'LoginController'
}
}
}).state('tab.friend-detail', {
url: '/friend/:friendId',
views: {
'tab-friends': {
templateUrl: 'templates/friend-detail.html',
controller: 'FriendDetailCtrl'
}
}
}).state('tab.buy', {
url: '/buy',
views: {
'tab-buy': {
templateUrl: 'templates/buy.html',
controller: 'PaymentController'
}
}
}).state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountController'
}
}
}).state('tab.order', {
url: '/account/order/:id',
views: {
'tab-order': {
templateUrl: 'templates/order-view.html',
controller: 'OrderController'
}
}
})
$urlRouterProvider.otherwise('/tab/dash');
在我的 Controller 中我有:
$scope.viewOrder = function(id) {
$state.go('tab.order', {id:id});
};
在 templates/tab-account.html 我有:
<ion-view title="Account">
<ion-content class="has-header padding">
<h1>Account</h1>
<h2>Your orders</h2>
<div class="card" ng-repeat="booking in bookings">
<div class="item item-text-wrap">
<b><a ng-click="viewOrder(booking.id)">{{ booking.carpark.city }}</a></b> on <b>{{ booking.date | date:'dd.mm.yyyy' }}</b>
</div>
</div>
那么item具体 View 如下:
<ion-view title="Order">
<ion-content class="has-header padding">
<h1>Your Order</h1>
<p>Test</p>
Order #: {{orderNumber}}
</ion-content>
</ion-view>
最后一个 View 基本上不会出现,即使 url 从 tab/account
更改为 /tab/account/order/1
我最近在 StackOverflow 上问了一些关于 ionic 的问题,如果有人经常遇到这些问题并认为我是个白痴,我深表歉意:/
提前致谢!
最佳答案
您的基础 View 中需要一个 ui-view。当你嵌套状态时,嵌套 View 显示在基础 View 中,只要你有 ui-view 元素:<div ui-view></div>
.
关于javascript - ionic 框架调用 View 中的 ui-router 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25005231/