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

问题描述

我使用Agnularjs和离子框架。我想实现一个嵌套的状态，它看起来像下面，

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

• Eventmenu（根）


• ＆NBSP;＆NBSP;家庭（2级）


• ＆NBSP;＆NBSP;＆NBSP;＆NBSP; 1家（3级）


• ＆NBSP;＆NBSP;＆NBSP;＆NBSP;首页2


• ＆NBSP;＆NBSP;签


• ＆NBSP;＆NBSP;与会者

我的路线文件看起来像，

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

有关完整的示例，请参见codePEN： HTTP：//$c$cpen.io/liamqma/笔/ mtBne

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

/event/home
/event/checkin

在工作，但

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

不工作。

任何帮助是极大AP preciated。谢谢！

Any help is greatly appreciated. Thanks!

推荐答案

我解决你的问题有：的http：// codepen.io / yrezgui /笔/ mycxB

基本上，离子是采用了棱角分明的UI-路由器具有巨大的API。你的情况，你需要检查此链接了解：<一href=\"https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names\">https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names

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

要短，和home1和HOME2状态是家乡的孩子，所以他们不能有menuContent视图访问，因为这是eventmenu状态有关。

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.

所以，你需要写：

.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是：

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

url: "/home/home1",

而不是：

url: "/home1",

通过编写的 eventmenu.home.home1 的，你做的和home1 的子主屏幕，所以它的URL必须是相对的，不是绝对的

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屋！