ionic框架中调用视图的Ui-router问题
ui-router issue in ionic framework calling views
我在ionic框架中有一个应用程序,大部分使用标签示例。但是,在其中一个视图中,我希望用户能够单击一个项目并进入基于该项目的另一个视图。
但是,无论何时单击一个项,它都会加载正确的视图,但不会调用该视图的模板文件。
这是我在路由器中的内容(注意不相关的部分被忽略了)
$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美元(/标签/dash);
在我的控制器中我有:
$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>
则项目特定视图如下:
<ion-view title="Order">
<ion-content class="has-header padding">
<h1>Your Order</h1>
<p>Test</p>
Order #: {{orderNumber}}
</ion-content>
</ion-view>
最后一个视图基本上不会出现,即使url从tab/account
变为/tab/account/order/1
我最近问了几个关于ionic的StackOverflow问题,如果人们一直遇到这些问题并认为我是个白痴,我很抱歉:/
提前感谢!
在基视图中需要一个ui-view。当你嵌套状态时,嵌套视图显示在基本视图中,无论你有一个ui-view元素:<div ui-view></div>
.
相关文章:
- 混合 ui-sref 和 $state.go 在 Angular ui-router 中进行状态转换
- Angular JS/UI Router:为给定状态禁用指令
- 使用AngularJS中的$stateProvider和ui.router
- 带有ui.router的带角度的嵌套视图
- 有UI路由问题的角度路由
- 如何使用AngularJS,Vise和UI Router全局实现身份验证
- 如何使用AngularJS和ui-router从Laravel 5.1获取下载文件
- AngularJS - ui.router - 如何在动态添加它们后重定向到所需的状态
- Angular UI Router-在不了解第二级嵌套视图的情况下更改第三级嵌套视图
- angularjs+ui.router:指令控制器和链接函数之间的不同行为
- AngularJS : ui.router 不显示模板
- [AngularJS][UI Router]在视图中显示视图
- Angular UI Router Resolve在AJAX完成之前未阻止状态更改
- 隐藏空模板,直到使用Restangular和UI Router加载数据
- 加载视图以查看问题 - AngularJS + ui.router
- 使用 AngularJS ui-router 深度链接到 URL 的问题
- 解决Angularjs ui-router问题
- ui-router动态路由问题
- ionic框架中调用视图的Ui-router问题
- $rootScope和UI-Router Resolve不持久的问题