Angularjs 중첩 상태: 3 수준

Angularjs 중첩 상태: 3 수준

Agnularjs와 Ionic Framework를 사용하고 있습니다.다음과 같이 중첩된 상태를 실현하려고 합니다.

• 이벤트 메뉴(루트)
• 홈(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");
})

완전한 예에 대해서는, 코드 페이지(http://codepen.io/liamqma/pen/mtBne 를 참조해 주세요.

/event/home
/event/checkin

동작하고 있습니다만,

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

동작하지 않습니다.

어떤 도움이라도 대단히 감사합니다.감사합니다!

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 상태는 홈 상태의 자식이기 때문에 eventmenu 상태와 관련이 있기 때문에 menuContent 보기에 액세스할 수 없습니다.

그래서 당신은 다음과 같이 쓸 필요가 있다.

.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과 즐거운 시간을 보내시기 바랍니다.

언급URL : https://stackoverflow.com/questions/21818515/angularjs-nested-states-3-level