关于ionic公用路由视图跳转的问题，纠结了我真的好久

宇哥你好

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

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

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

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

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

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

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

宇哥你好

哪位大哥能帮忙看下吗

慕容紫英一

不要把路由写在views下面，自己定义返回按钮和动画。.state('m-fund', {
    url: '/m-fund',
    templateUrl: 'templates/fund/m_fund.html',
    controller: 'MFundCtrl'
})

ionicwang

路由写成这样

1.             .state('login', {
   
2.                 url: '/login/:router',
   
3.                 templateUrl: "templates/login.html",
   
4.                 controller: 'LoginCtrl'
   
5. 
   
6.             })

复制代码

然后在ion-view里面写上

1. <ion-nav-buttons side="left">
   
2.         <!-- <button class="button-icon ion-arrow-left-c" ng-click="backView()"></button>-->
   
3. 
   
4.         <a  ng-if="hasBack" ng-click="$ionicGoBack()" class="button back-button buttons  button-clear header-item"><i class="icon ion-ios-arrow-back"></i>
   
5.             返回
   
6.         </a>
   
7.     </ion-nav-buttons>

复制代码

ion-nav-buttons 和 ion-content同级

宇哥你好

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

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

宇哥你好

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

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

ionicwang

浏览器没有动画不要管

上线的时候配置这个插件

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

就都有动画了

ionicwang

你就照着写  不会有什么问题的

慕容紫英一

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

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

复制代码

宇哥你好

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

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

1. 
   
2.   .config(function($stateProvider, $urlRouterProvider) {
   
3.     $stateProvider
   
4.       .state('tab', {
   
5.         url: '/tab',
   
6.         abstract: true,
   
7.         templateUrl: 'templates/tabs.html'
   
8.       })
   
9.       .state('index', {
   
10.         url: '/index',
    
11.         templateUrl: 'templates/index/index.html',
    
12.         controller:'indexController'
    
13.       })
    
14.       .state('topic-detail', {
    
15.         url: '/index/:id',
    
16.         templateUrl: 'templates/index/topic-detail.html',
    
17.         controller:'topicDetailController'
    
18.       })
    
19.       .state('chats', {
    
20.         url: '/chats',
    
21.         templateUrl: 'templates/tab-chats.html',
    
22.         controller: 'ChatsCtrl'
    
23.       })
    
24.       .state('chat-detail', {
    
25.         url: '/chats/:chatId',
    
26.         templateUrl: 'templates/chat-detail.html',
    
27.         controller: 'ChatDetailCtrl'
    
28.       });
    
29.     $urlRouterProvider.otherwise('/index');
    
30. 
    
31.   });

复制代码

1. <ion-tabs class="tabs-icon-top tabs-color-active-positive" ng-class="{'tabs-item-hide': $root.hideTabs}">
   
2. 
   
3.   <!-- Dashboard Tab -->
   
4.   <ion-tab title="书圈" icon-off="ion-ios-color-wand-outline" icon-on="ion-ios-color-wand" href="#/index">
   
5.     <ion-nav-view name="index"></ion-nav-view>
   
6.   </ion-tab>
   
7. 
   
8.   <!-- Chats Tab -->
   
9.   <ion-tab title="书友会" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/chats">
   
10.     <ion-nav-view name="tab-chats"></ion-nav-view>
    
11.   </ion-tab>
    
12. 
    
13.   <!-- Account Tab -->
    
14.   <ion-tab title="我" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/account">
    
15.     <ion-nav-view name="tab-account"></ion-nav-view>
    
16.   </ion-tab>
    
17. 
    
18. 
    
19. </ion-tabs>
    

复制代码