Angularjs 嵌套状态:3 级 [英] Angularjs Nested states: 3 level

问题描述

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

• 事件菜单(根)
•   首页(2 级)
•    首页 1(3 级)
•     首页 2
•   签到
•   参加者

我的路由文件看起来像，

angular.module('ionicApp', ['ionic']).config(function($stateProvider, $urlRouterProvider) {$stateProvider.state('事件菜单', {网址:/事件"，摘要:真实，templateUrl: "事件菜单.html"}).state('eventmenu.home', {网址:/家"，意见:{'菜单内容':{模板网址:home.html"}}}).state('eventmenu.home.home1', {网址:/home1"，意见:{'菜单内容':{templateUrl: "home1.html"}}}).state('eventmenu.home.home2', {网址:/home2"，意见:{'菜单内容':{模板网址:home2.html"}}}).state('eventmenu.checkin', {url: "/签到",意见:{'菜单内容':{templateUrl: "check-in.html",控制器:CheckinCtrl"}}}).state('eventmenu.attendees', {网址:/与会者"，意见:{'菜单内容':{templateUrl: "attendees.html",控制器:与会者Ctrl"}}})$urlRouterProvider.otherwise("/event/home");})

完整示例，请参见 codepen:http://codepen.io/liamqma/pen/mtBne

/event/home/事件/签到

正在工作，但是

/event/home/home1/事件/家/家2

不工作.

非常感谢任何帮助.谢谢！

解决方案

我在那里解决了你的问题:http://codepen.io/yrezgui/pen/mycxB

基本上，Ionic 使用的是 Angular-UI-Router，它有一个巨大的 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', {网址:/home2"，意见:{'menuContent@eventmenu' :{模板网址:home2.html"}}})

代替:

.state('eventmenu.home.home2', {网址:/home2"，意见:{'菜单内容':{模板网址:home2.html"}}})

即使经过此修改，home1 也无法工作，因为它的网址是:

url: "/home/home1",

代替:

url: "/home1",

通过编写eventmenu.home.home1，您可以使home1成为home的孩子，因此它的url需要是相对的，而不是绝对的.

希望你理解它并享受 Ionic 的乐趣;)

I am using Agnularjs and Ionic Framework. I am trying to achieve a nested states, which looks like below,

• Eventmenu(root)
•   Home (2 level)
•     Home 1 (3 level)
•     Home 2
•   checkin
•   attendee

My routes file looks like,

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

For full example, please see codepen: http://codepen.io/liamqma/pen/mtBne

/event/home
/event/checkin

are working, but

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

are not working.

Any help is greatly appreciated. Thanks!

解决方案

I solved your problem there : http://codepen.io/yrezgui/pen/mycxB

Basically, Ionic is using Angular-UI-Router which has a huge API. In your case, you need to check this link to understand : https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names

To be short, home1 and home2 states are children of home state, so they can't have access of menuContent view, because it's related to eventmenu state.

So you need to write :

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

Instead of :

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

And home1 wasn't working even after this modification because its url was :

url: "/home/home1",

Instead of :

url: "/home1",

By writing eventmenu.home.home1, you make home1 a child of home, so its url needs to be relative, not absolute.

Hope you understand it and have fun with Ionic ;)

这篇关于Angularjs 嵌套状态:3 级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！