如何将角度视图包含在具有相同控制器的另一个视图中？

Question

如何将多个“子”视图放入角1中的“父”视图？我认为它与UI路由器的"多名称视图“相关，但我没有看到指定父视图的方法。(该链接中的示例假定所有容器都在index.html中。)

下面是一个简化的示例：

$stateProvider.state('frame', {
    url: '/frame',
    template: '<div ui-view></div>'
}).state('frame.page', {
    url: '/frame/page',
    controller: 'page-controller',
    templateUrl: 'views/page.html', // see below
    views: {
        aside: {
           templateUrl: 'views/page-aside.html'
        },
        thing: {
           templateUrl: 'views/page-thing.html'
        }
    }
}) // ... etc ... lots of other states built off of "frame"

其中page.html包含大量内容，包括一些用于子视图的容器：

<div ui-view="aside"></div>
<div ui-view="thing"></div>

Answer 1

例如，当您需要控制一个状态的多个出口时，您可以使用多个视图，例如，如果您想更改每个状态的备用状态。

您不能按您建议的方式执行，因为ui-router不允许您在使用视图时使用模板，因为它会影响父状态。当前状态表示每个视图(多个或单个<div ui-view/> )的配置。

可用的解决方案是使用包含声明的ui-view="myView"的状态的嵌套状态。每个子状态都将设置父集上的所有视图。

片段波纹管实现了一个简单的nav /节/旁白布局，其中有两个实现多视图控件的状态。

​

angular.module('app', ['ui.router'])
  .config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/frame/page/thing');

    $stateProvider
      .state('frame', {
        url: '/frame',
        template: `
          <div ui-view></div>
        `,
      }).state('frame.page', {
        url: '/page',
        template: `
          <nav>
            <a ui-sref="frame.page.thing" ui-sref-active="active">Things</a>
            <a ui-sref="frame.page.stuff" ui-sref-active="active">Stuff</a>
          </nav>
          <section ui-view="thing"></section>
          <aside ui-view="aside"></aside>
        `,
      }).state('frame.page.thing', {
        url: '/thing',
        views: {
          aside: {
            template: `
              <h2>Aside</h2>
              Aside for things
            `
          },
          thing: {
            template: `
              <h2>Page things</h2>
            `
          }
        }
      })
      .state('frame.page.stuff', {
        url: '/thing',
        views: {
          aside: {
            template: `
              <h2>Aside</h2>
              Aside for stuff
            `
          },
          thing: {
            template: `
              <h2>Page Stuff</h2>
            `
          }
        }
      });
  });

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

nav {
  width: 100%;
  display: block;
  padding: 10px;
  border: 1px solid gray;
}

nav a:hover {
  color: gray;
}

nav a.active {
  color: blue;
}

nav a {
  color: black;
  padding: 10px;
  font-family: Verdana;
}

section,
aside {
  height: 100%;
  display: block;
  float: left;
  border: 1px solid gray;
  padding: 10px;
}

aside {
  width: 25%;
}

section {
  width: 75%;
}

<div ng-app="app">
  <div ui-view></div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script>

​