Angularjs嵌套状态：3级

Question

我正在使用Agnularjs和Ionic Framework。我想实现一个嵌套的状态，它看起来像下面，

• Eventmenu（根）
•    首页（2级）
•        首页1（3级）
•        首页2
•    登记
•    与会者

我的路线文件看起来像，

angular.module('ionicApp', ['ionic']) 

.config(function($stateProvider, $urlRouterProvider) { 

    $stateProvider 
    .state('eventmenu', { 
     url: "/event", 
     abstract: true, 
     templateUrl: "event-menu.html" 
    }) 
    .state('eventmenu.home', { 
     url: "/home", 
     views: { 
     'menuContent' :{ 
      templateUrl: "home.html" 
     } 
     } 
    }) 
     .state('eventmenu.home.home1', { 
     url: "/home1", 
     views: { 
     'menuContent' :{ 
      templateUrl: "home1.html" 
     } 
     } 
    }) 
     .state('eventmenu.home.home2', { 
     url: "/home2", 
     views: { 
     'menuContent' :{ 
      templateUrl: "home2.html" 
     } 
     } 
    }) 
    .state('eventmenu.checkin', { 
     url: "/check-in", 
     views: { 
     'menuContent' :{ 
      templateUrl: "check-in.html", 
      controller: "CheckinCtrl" 
     } 
     } 
    }) 
    .state('eventmenu.attendees', { 
     url: "/attendees", 
     views: { 
     'menuContent' :{ 
      templateUrl: "attendees.html", 
      controller: "AttendeesCtrl" 
     } 
     } 
    }) 

    $urlRouterProvider.otherwise("/event/home"); 
}) 

对于完整的示例，请参阅codepen：http://codepen.io/liamqma/pen/mtBne

/event/home 
/event/checkin 

正在努力，但

/event/home/home1 
/event/home/home2 

不起作用。

任何帮助，非常感谢。谢谢！

Answer 1

我解决存在问题的方法：http://codepen.io/yrezgui/pen/mycxB

基本上，离子是采用了棱角分明的UI，路由器具有巨大的API。在你的情况下，你需要检查这个链接以了解：https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names

简而言之，home1和home2状态是home状态的子状态，因此它们无法访问menuContent视图，因为它与eventmenu状态有关。

所以你需要写：

.state('eventmenu.home.home2', { 
    url: "/home2", 
    views: { 
    'menuContent@eventmenu' :{ 
     templateUrl: "home2.html" 
    } 
    } 
}) 

相反的：

.state('eventmenu.home.home2', { 
    url: "/home2", 
    views: { 
    'menuContent' :{ 
     templateUrl: "home2.html" 
    } 
    } 
}) 

而且和home1没有这个修改后甚至工作，因为它的URL是：

url: "/home/home1", 

相反作者：

url: "/home1", 

通过编写eventmenu.home.home1，你让和home1家的孩子，所以它的URL必须是相对的，不是绝对的。

希望你明白它，并与Ionic玩得开心;）