web-dev-qa-db-ja.com

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");
})

完全な例については、codepenを参照してください： http://codepen.io/liamqma/pen/mtBne

/event/home
/event/checkin

働いていますが

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

機能していません。

どんな助けでも大歓迎です。ありがとう！

angularjsangularjs-routingionic-framework
31
Liam

私はそこであなたの問題を解決しました： 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"
    }
  }
})

また、URLが次の理由により、home1はこの変更後も機能していませんでした。

url: "/home/home1",

の代わりに ：

url: "/home1",

eventmenu.home.home1と書くと、-home1がhomeの子になるため、そのURLは相対である必要があります。絶対ではありません。

あなたがそれを理解し、Ionic;）で楽しんでください

50
Yacine Rezgui