Question

你怎么能把一些＆＃34;孩子＆＃34;观看父母的观点＆＃34;在Angular 1中查看？我认为这与＆＃34; Multiple Name Views＆＃34;有关。使用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"的状态的嵌套状态。每个子状态都将在父集上设置所有视图。

下面的代码段实现了一个简单的导航/部分/旁边布局，其中两个状态实现了多个视图控制。

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>

如何使用同一控制器在另一个视图中包含角度视图？

1 个答案: