Angularjs嵌套状态:3级

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

>事件菜单(root)
>首页(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

不工作。

任何帮助是极大的赞赏。谢谢!

解决了你的问题: 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',{
  url: "/home2",views: {
    'menuContent@eventmenu' :{
      templateUrl: "home2.html"
    }
  }
})

代替 :

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

和home1不工作,即使这个修改后,因为其url是:

url: "/home/home1",

代替 :

url: "/home1",

通过编写eventmenu.home.home1,你使home1的家的孩子,所以它的url需要是相对的,而不是绝对的。

希望你明白它,并与离子乐趣;)

相关文章

AngularJS 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...