Ionic UI路由器不适用于子视图

我正在尝试创建一个非常简单的lookbook应用程序。然而，我似乎无法获得工作路线。我试着回答this question来调试路由。控制台中没有任何东西出现Ionic UI路由器不适用于子视图

我试图创建一个应用程序，用户在页面上看到几个外观，然后可以导航到相应的详细信息页面。如果Ionic也认识到详细信息页面是Lookbook页面的子页面，那将会很好。从而显示菜单栏中的后退按钮。

的app.config路线设置代码：

$stateProvider 

    //Lookbook view 
    .state('lookbook', { 
    url: '/lookbook', 
    views: { 
     'main': { 
     templateUrl: 'templates/lookbook.html', 
     controller: function() { 
      console.log('Lookbook controller loaded!'); 
     } 
     } 
    } 
    }) 

    // Details view 
    .state('lookbook.brand-shirt', { 
    url: '/lookbook/brand-shirt', 
    views: { 
     'main': { 
     templateUrl: 'templates/brand/shirt.html', 
     controller: function() { 
      console.log('Details controller loaded!'); 
     } 
     } 
    } 
    }); 

$urlRouterProvider.otherwise('/lookbook');

的index.html<body>内容：

<ion-nav-bar class="bar-stable"> 
    <ion-nav-back-button> 
    </ion-nav-back-button> 

    <ion-nav-title> 
     <img class="logo" alt="Lookbook Logo" ng-src="assets/images/icons/logo.svg"> 
    </ion-nav-title> 
    </ion-nav-bar> 

    <ion-nav-view name="main"> 
    </ion-nav-view>

该页面的lookbook显示出来。但是，当我导航到/lookbook/brand-shirt时，它将恢复为/lookbook。我错过了什么？

来源

2017-01-22 Feanaro

在该路由中，brand-shirt状态是lookbook状态（lookbook.brand-shirt）的子项，因为您不需要加载详细信息INSIDE视图，因此不需要将其设置为这样。

$stateProvider 

    //Lookbook view 
    .state('lookbook', { 
    url: '/lookbook', 
    views: { 
     'main': { 
     templateUrl: 'templates/lookbook.html', 
     controller: function() { 
      console.log('Lookbook controller loaded!'); 
     } 
     } 
    } 
    }) 

    // Details view 
    .state('brand-shirt', { 
    url: '/lookbook/brand-shirt', 
    views: { 
     'main': { 
     templateUrl: 'templates/brand/shirt.html', 
     controller: function() { 
      console.log('Details controller loaded!'); 
     } 
     } 
    } 
    }); 

    $urlRouterProvider.otherwise('/lookbook');

这样做。而且历史记录的工作原理是相同的，因为您正在推送'main'ion-nav-view中的视图。因此，在您的应用程序开始时，/lookbook在main中加载，当您转到brand-shirt时，新视图在main视图堆栈中位于上方。如果你回去，你将删除细节视图并返回到lookbook。

CodePen

来源

2017-01-23 00:05:15 Hiraqui

你的解决方案的工作，但没有孩子的状态，我不能再使用通过UI路由器解决父母的解析参数 –

您可以将对象发送到子状态作为一个参数或使用服务来处理保存和获取的对象。 – Hiraqui

Ionic UI路由器不适用于子视图

回答

相关问题