如何在路由器的视图中实现视图

Question

使用 oArtist.ArtistName = txtArtist.Value; ，我可以在一个路由器中拥有多个UI-Router，但如果我想在其中一个ui-view中拥有多个ui-view怎么样？看看我的例子：

ui-view

我真的可以按上述方式工作，但嵌套在视图中的视图从未显示在页面上。任何人都有想法在视野中做观点吗？

Answer 1

一般来说，这个状态定义的概念：

...
views:
{
  views : { ... }
}

不受支持。但我们可以将其视为语法问题。因为我们可以将其改为

// state 'index'
...
views:
{
  '': { ... place holder for other views ...}
  'targetA@index' : { ... injects into above view ... }
  'targetB@index' : { ... injects into above view ... }
}

我建议查看此Q＆amp;一个（有a working example）：

Angular UI Router - Nested States with multiple layouts

重点是引入一个特殊的 view ，其中包含所有 layout 。 layout.html内容可以是：

<div>
  <section class="top">
    <div ui-view="top"></div>
  </section>

  <section class="middle">

    <section class="left">
      <div ui-view="left"></div>
    </section>

    <section class="main">
      <div ui-view="main"></div>
    </section>

  </section>
</div>

现在，我们会在view中将此state作为主视图，其他人将注入 layout.html < /强>：

.state('index', {
    url: '/',
    views: {
      // this goes into index.html ui-view
      '@' : {
        templateUrl: 'layout.html',
        controller: 'IndexCtrl'
      },
      // these are injected into layout.html
      // check the absolute naming 'top@index'
      'top@index' : { templateUrl: 'tpl.top.html',},
      'left@index' : { templateUrl: 'tpl.left.html',},
      'main@index' : { templateUrl: 'tpl.main.html',},
    },
  })

在此处详细了解绝对命名：

• Angularjs ui-router not reaching child controller