Angular UI Route中的嵌套状态和视图

Sorry if similar questions have been asked before but I have been strugling to get a certain setup working for a while. I took a working plunker from from an existing question and am trying to tweak it just a little to my needs.

很抱歉,如果之前已经提出了类似的问题,但我一直在努力让某个设置工作一段时间。我从一个现有问题中找到了一名工作人员,并试图根据我的需要稍微调整一下。

Orginal Plunker: http://plnkr.co/edit/uY1Sl3f0KCTukPGHDRdW

Orginal Plunker:http://plnkr.co/edit/uY1Sl3f0KCTukPGHDRdW

My (slightly) edited fork: http://plnkr.co/edit/hlw4Et00UeGjzxD4Mszi

我的(稍微)编辑过的叉子:http://plnkr.co/edit/hlw4Et00UeGjzxD4Mszi

What I am trying to achieve is a base layout containing a header, footer and unnamed view for the page content. I can do this fine with the original plunker. But when I try to get more fancy and have a structure more like this:

我想要实现的是一个基本布局,包含页面内容的页眉,页脚和未命名视图。我可以用原始的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'
        }
      }
    })

And here is the adjusted state definition:

这是调整后的州定义:

.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'
    }
  },
});

What I am trying to do here is make it so that 'root.home' state is just a base state for prepending the URL 'home' or whatever the url is in my real application. I have tried ready though the ui-route sample app but it's a lot to take in and am going in circles. I'm sure this is simple...

我在这里尝试做的是使'root.home'状态只是一个基本状态,用于在URL'home'或者我的实际应用程序中的url之前添加。我已经尝试通过ui-route示例应用程序做好准备,但是要接受并且进入圈子需要很多。我确信这很简单......

1 个解决方案

#1

There is a working updated plunker. There is one state definition adjustment.

有一个工作更新的plunker。有一个州定义调整。

This was original piece of code:

这是原始代码:

.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'
    }
  },
});

What was wrong there? Firstly a note - we do not need to define parent: 'root', because our parent is in our name 'root.home'. So, to make it more clear, I decided to keep parent setting, while change the state name into 'home'.

那里出了什么问题?首先注意 - 我们不需要定义parent:'root',因为我们的父级名字是'root.home'。所以,为了更清楚,我决定保持父设置,同时将州名改为'home'。

Secondly, we have two views in play for our state, but the second one, is ordered to be injected into the first one.

其次,我们有两个观点在我们的州,但第二个,被命令注入第一个。

// 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'

but there was no ui-view="list" defined.

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

Finally, we cannot declare url for views. Url belongs just to states:

最后,我们无法为视图声明url。网址仅属于州:

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

So, we should introduce the child of our state... 'home.list'

所以,我们应该介绍我们国家的孩子......'home.list'

This is the adjusted state(s) definition (from the new working plunker):

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

#1