angularjs - Angularjs嵌套状态：3级

Question

我正在使用 Agnularjs 和 Ionic 框架。我正在尝试实现嵌套状态，如下所示，

• 事件菜单（根）
•   家（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

基本上，Ionic 使用的是具有庞大 API 的 Angular-UI-Router。在您的情况下，您需要检查此链接以了解：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成为home的孩子，因此它的 url 需要是相对的，而不是绝对的。

希望你理解它并享受 Ionic 的乐趣；）