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玩得開心;）