PhoneGap中文网

标题: 关于ionic公用路由视图跳转的问题，纠结了我真的好久 [打印本页]

作者: 宇哥你好 时间: 2016-3-28 00:26
标题: 关于ionic公用路由视图跳转的问题，纠结了我真的好久
本帖最后由宇哥你好于 2016-3-28 10:30 编辑

我现在做的是单页面app，假如我底部菜单有4个主视图，首页、搜索、购物车、个人中心

通过首页点击某个商品就可以到商品详情页视图例如/list/:id 这样的配置，后面的功能依次有下单-->支付流程

我在商品详情页点击了加入购物车，成功加入购物车，然后点击返回到首页

这个时候，我从首页点进了购物车，可以看到我加入购物车的商品列表，那么问题来了，我如何从购物车的列表跳到商品详情的那个视图下去，因为我商品详情的视图是属于首页列表下，我如果使用了$state.go('#/list/id')，页面没有ng-Animation的进入页面效果，并且没有了ion-nav-back-button，我点击设备上的返回按键，返回到的是#/list并不是我的上一级购物车商品列表这个视图。

我不知道这个问题如何解决，我不可能在购物车后面继续配置商品详情视图然后还有下单-->支付视图，这样会重复很多次，如果我从个人中心的订单里查看商品详情的话难道还要再从个人中心里再配置商品详情的视图吗，我觉得不可能这样做的。

我一直没有解决这个问题，我是用ionic的modal，将商品详情和后面的功能做成弹出一个模板来解决这个问题，这样就会在controller里出现大量重复的代码。

希望遇到这个问题的可以告诉一下如何解决，或者有简单的demo给我看下，毕竟我是新手请谅解

作者: 宇哥你好 时间: 2016-3-28 10:31
哪位大哥能帮忙看下吗

作者: 慕容紫英一 时间: 2016-3-28 10:47
不要把路由写在views下面，自己定义返回按钮和动画。.state('m-fund', {
url: '/m-fund',
templateUrl: 'templates/fund/m_fund.html',
controller: 'MFundCtrl'
})

作者: ionicwang 时间: 2016-3-28 11:17
路由写成这样

.state('login', {
url: '/login/:router',
templateUrl: "templates/login.html",
controller: 'LoginCtrl'
})

复制代码

然后在ion-view里面写上

<ion-nav-buttons side="left">
<a ng-if="hasBack" ng-click="$ionicGoBack()" class="button back-button buttons button-clear header-item"><i class="icon ion-ios-arrow-back"></i>
返回
</a>
</ion-nav-buttons>

复制代码

ion-nav-buttons 和 ion-content同级

作者: 宇哥你好 时间: 2016-3-28 11:57

慕容紫英一发表于 2016-3-28 10:47
不要把路由写在views下面，自己定义返回按钮和动画。.state('m-fund', {
url: '/m-fund',
template ...

自己写动画啊，好像好复杂的样子呢

作者: 宇哥你好 时间: 2016-3-28 11:58

ionicwang 发表于 2016-3-28 11:17
路由写成这样

不知道你定义的backView()和hasBack都是什么呀，我用不用管？

作者: ionicwang 时间: 2016-3-28 14:12
浏览器没有动画不要管

上线的时候配置这个插件

http://www.phonegap100.com/article-482-1.html

就都有动画了

作者: ionicwang 时间: 2016-3-28 14:13
你就照着写不会有什么问题的

作者: 慕容紫英一 时间: 2016-3-28 14:48

宇哥你好发表于 2016-3-28 11:57
自己写动画啊，好像好复杂的样子呢

$rootScope.WBack = function(){
$ionicViewSwitcher.nextDirection('back');
$ionicHistory.goBack();
};

复制代码

作者: 宇哥你好 时间: 2016-3-28 15:03

ionicwang 发表于 2016-3-28 14:13
你就照着写不会有什么问题的

哥，我现在这个底部的菜单不出来了。

.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('index', {
url: '/index',
templateUrl: 'templates/index/index.html',
controller:'indexController'
})
.state('topic-detail', {
url: '/index/:id',
templateUrl: 'templates/index/topic-detail.html',
controller:'topicDetailController'
})
.state('chats', {
url: '/chats',
templateUrl: 'templates/tab-chats.html',
controller: 'ChatsCtrl'
})
.state('chat-detail', {
url: '/chats/:chatId',
templateUrl: 'templates/chat-detail.html',
controller: 'ChatDetailCtrl'
});
$urlRouterProvider.otherwise('/index');
});

复制代码

<ion-tabs class="tabs-icon-top tabs-color-active-positive" ng-class="{'tabs-item-hide': $root.hideTabs}">
<ion-tab title="书圈" icon-off="ion-ios-color-wand-outline" icon-on="ion-ios-color-wand" href="#/index">
<ion-nav-view name="index"></ion-nav-view>
</ion-tab>
<ion-tab title="书友会" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/chats">
<ion-nav-view name="tab-chats"></ion-nav-view>
</ion-tab>
<ion-tab title="我" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/account">
<ion-nav-view name="tab-account"></ion-nav-view>
</ion-tab>
</ion-tabs>

复制代码

作者: 宇哥你好 时间: 2016-3-28 16:31

慕容紫英一发表于 2016-3-28 10:47
不要把路由写在views下面，自己定义返回按钮和动画。.state('m-fund', {
url: '/m-fund',
template ...

还有个问题啊，那如果我用了这种方式路由是不是就不用ionic自带的ion-tab了就是自己建立一个tab页面？

作者: admin 时间: 2016-3-29 09:18

宇哥你好发表于 2016-3-28 15:03
哥，我现在这个底部的菜单不出来了。

不继承tab哪里来的底部菜单，建议你看看基础的路由教程

，还有多研究研究几个app

一般app的详情页面是去掉tab的

www.ionic.wang

欢迎光临 PhoneGap中文网 (http://bbs.phonegap100.com/)