Angularjs 嵌套状态:3 级

简而言之，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  attendeeMy 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/checkinare working, but/event/home/home1/event/home/home2are not working.Any help is greatly appreciated. Thanks! 解决方案 I solved your problem there : http://codepen.io/yrezgui/pen/mycxBBasically, 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-namesTo 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 级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！