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

Question

抱歉，如果之前有人问过类似的问题，但我一直在努力让某个设置工作一段时间。我从一个现有问题中提取了一个有效的 plunker，并试图根据我的需要对其进行一些调整。

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

我的（略微）编辑的分支：http://plnkr.co/edit/hlw4Et00UeGjzxD4Mszi

我想要实现的是一个包含页面内容的页眉、页脚和未命名视图的基本布局。我可以用原来的 plunker 做到这一点。但是当我尝试变得更花哨并拥有更像这样的结构时：

$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'，因为我们的 parent 在我们的名字 'root.home' 中。所以，为了更清楚，我决定保留 parent 设置，同时将状态名称更改为 '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',

所以，我们应该介绍一下我们州的child... 'home.list'

这是调整后的状态定义（来自新的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'
    }
  },
});

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

Nested sates and views in Angular UI Route

angularjs

angular-ui

angular-ui-router