Angular UI中的嵌套状态和视图路线

Question

对不起，如果以前有类似的问题，但我一直在努力让某个设置工作一段时间。我从一个现存的问题中汲取了一名工作中的潜伏者，并试图根据我的需要调整它。

原单Plunker：http://plnkr.co/edit/uY1Sl3f0KCTukPGHDRdW

我（略）编辑叉：http://plnkr.co/edit/hlw4Et00UeGjzxD4Mszi

我想实现是一个包含页面内容的页眉，页脚和未命名视图基地布局。我可以用原始的蹦跳者做到这一点。但是，当我试图让更多的看中，并有一个结构更是这样的：

$urlRouterProvider.otherwise('/home/list'); 

$stateProvider 
    .state('root', { 
     abstract: true, 
     views: { 
     '@': { 
      controller: 'RootCtrl', 
      controllerAs: 'rootCtrl' 
     }, 
     'header@': { 
      templateUrl: 'header.html', 
      controller: 'HeaderCtrl', 
      controllerAs: 'headerCtrl' 
     }, 
     'footer@': { 
      templateUrl: 'footer.html', 
      controller: 'FooterCtrl', 
      controllerAs: 'footerCtrl' 
     } 
     } 
    }) 

这里是调整状态定义：

.state('root.home', { 
    parent: 'root', 
    url: '/home', 
    views: { 
    '@': { 
     template: '<ui-view></ui-view>', 
     controller: 'HomeController', 
     controllerAs: 'homeCtrl' 
    }, 
    'list@root.home': { 
     url: '/list', 
     template: 'homeList.html', 
     controller: 'HomeController', 
     controllerAs: 'homeCtrl' 
    } 
    }, 
}); 

我想在这里做的是让这个'root.home'状态只是一个基本状态，用于预先设置URL'home'或任何URL在我的真实应用程序中。我已经尝试通过ui-route示例应用程序准备好了，但要花很多时间并且正在进行循环。我敢肯定这很简单...

Answer 1

有一个working updated plunker。有一个状态定义调整。

这是原来的代码：

.state('root.home', { 
    parent: 'root', 
    url: '/home', 
    views: { 
    '@': { 
     template: '<ui-view></ui-view>', 
     controller: 'HomeController', 
     controllerAs: 'homeCtrl' 
    }, 
    'list@root.home': { 
     url: '/list', 
     template: 'homeList.html', 
     controller: 'HomeController', 
     controllerAs: 'homeCtrl' 
    } 
    }, 
}); 

有什么问题呢？首先是一张纸条 - 我们不需要定义parent: 'root'，因为我们的父母是我们的名字'root.home'。所以，为了更清楚一点，我决定保持父母的设置，同时将州名改为“家”。其次，我们有两种观点在为我们的国家发挥作用，但第二种观点被命令注入第一种观点。

// this line is instructing UI-Router: inject this into 
// the other view definition of the current state 
// search for ui-view="list" 
'list@root.home' 

但是没有定义ui-view="list"。

最后，我们无法为视图声明url。 URL属于刚指出：

// this is wrong. The view cannot have url 
// url is for state 
'list@root.home': { 
     url: '/list', 

所以，我们应该介绍一下我们国家的孩子......“home.list”

这是调整后的状态（S）定义（从新working plunker ）：

.state('home', { 
    parent: 'root', 
    url: '/home', 
    views: { 
    '@': { 
     template: '<div ui-view="list"></div>', 
     controller: 'HomeController', 
     controllerAs: 'homeCtrl' 
    } 
    }, 
}) 
.state('home.list', { 
    url: '/list', 
    views: { 
    'list': { 
     templateUrl: 'homeList.html', 
     controller: 'HomeController', 
     controllerAs: 'homeCtrl' 
    } 
    }, 
});