Question

我想构建一个具有以下结构header-view，main-view，footer-view的站点。所以我定义了一个包含标题＆amp;的根路由。页脚。 root的孩子将成为我的所有站点。在这些站点中，我将有更多的嵌套视图。

在下面的代码中，它确实显示了标题，但没有显示页脚和＆amp;主要观点。一旦我删除了父继承，它就会显示主视图，但不会显示标题和＆amp;页脚。

HTML

<body ng-app="App">
    <header ui-view="header"></header>
    <main ui-view></ui-view>
    <footer ui-view="footer"></footer>
</body>

JS

   module.config(function($urlRouterProvider, $stateProvider) {
      $urlRouterProvider.otherwise('/home');
      $stateProvider
        .state('root', {
          abstract: true,
          views: {
            '@': {
                controller: 'RootCtrl',
                controllerAs: 'rootCtrl'
            },
            'header@': {
                templateUrl: 'modules/header/header.html',
                controller: 'HeaderCtrl',
                controllerAs: 'headerCtrl'
            },
            'footer@': {
                templateUrl: 'modules/footer/footer.html',
                controller: 'FooterCtrl',
                controllerAs: 'footerCtrl'
                }
           }
        })
        .state('root.home',{
            parent:'root',
            url:'',
            templateUrl:'modules/home/home.html',
            controller: 'HomeController',
            controllerAs:'homeCtrl'
        });
    });

Answer 1

指向working plunker的链接。

UI-Router逻辑如何查找视图的目标/锚点：始终尝试将child插入parent 。如果不可能，则使用绝对命名。见：

View Names - Relative vs. Absolute Names

所以我改变的是，父母未命名的视图现在包含一个孩子的目标/锚点 - 未命名的视图<ui-view />：

.state('root', {
  abstract: true,
  views: {
    '@': {
        template: '<ui-view />', // NEW line, with a target for a child
        controller: 'RootCtrl',
        controllerAs: 'rootCtrl'
    },
    ....

另外，因为我们说，默认网址是

  $urlRouterProvider.otherwise('/home');

我们必须有这样的状态：

.state('root.home',{
    parent:'root',
    url:'/home', // this is the otherwise, to have something on a start up

检查here

使用plunker here的另一种方法可能是针对子项中的根视图：

.state('root.home',{
    parent:'root',
    url:'/home',
    views: {
      '@': {
      templateUrl:'home.html',
      controller: 'HomeController',
      controllerAs:'homeCtrl'
      }
    },

在这种情况下，父状态不必具有<ui-view /> - 我们以root为目标，但我们不会继承任何东西......为什么会这样？看到这个链接：

Angular ui-router：Parent＆amp;儿童观点

1 个答案:

View Names - Relative vs. Absolute Names

Scope Inheritance by View Hierarchy Only