ui-router多个命名嵌套视图

Question

我有这样的嵌套视图

<div ui-view="master" id="ng-view">
  <div class="container-fluid height-full">
      <div ui-view="globalNavigationPanel" class="row"></div> 
     <div ui-view="detail" id="detailContent" class="row"></div>
  </div>
</div>

这是我的解析器

function resolveShell()
{
   return {
            'views': {
                'master': {
                    templateUrl: 'core/views/shell.html',
                    controller: 'core/controllers/shellcontroller.js',
                    controllerAs: 'vm',
                },
                'globalNavigationPanel': {
                    templateUrl: 'core/views/globalNavigationPanel',
                    controller: 'core/controllers/globalNavigationPanelController.js',
                    controllerAs: 'gpvm',
                }
            },
            'resolve': {
                load: [
                    '$q', '$rootScope', ($q, $rootScope) => {
                        var dependencies = [
                            'core/controllers/shellcontroller.js',
                            'core/controllers/globalNavigationPanelController.js'
                        ];
                        return resolveDependencies($q, $rootScope, dependencies);
                    }
                ]
            }
        };
  }

当我设置状态时，我可以看到所有下载的文件和shellcontroller.js被调用，但是看不到 globalNavigationPanelController 。

我也看不到globalNavigationPanel视图更新。

我是否可以基本上设置状态并解析多个命名的嵌套视图 ？

Answer 1

这是因为我们使用了嵌套在一个状态中的多个视图。 这意味着，我们必须使用绝对命名。

这样，我们可以指示UI-Router，第二个视图应置于当前状态的其他视图中。 您的州名是什么并不明显，但让我们想象一下它是“外壳”

'views': {
    'master': {
        ...
    },
    'globalNavigationPanel@shell': {
        ....
    }
},

现在，我们的'shell'状态的templateUrl: 'core/views/shell.html',应该是（我的意思是templateUrl: 'core/views/shell.html', ）

<div class="container-fluid height-full">
   <div ui-view="globalNavigationPanel" class="row"></div> 
   <div ui-view="detail" id="detailContent" class="row"></div>
</div>

并且index.html应该只包含：

<div ui-view="master" id="ng-view">
</div>

因为母版将包含“ globalNavigationPanel”的占位符

还要检查文档

视图名称-相对名称与绝对名称

在幕后，每个视图都被分配一个遵循viewname@statename方案的绝对名称，其中viewname是视图指令中使用的名称，状态名称是该州的绝对名称，例如contact.item 。 您还可以选择以绝对语法编写视图名称。

例如，前面的示例也可以写成：

.state('report',{
    views: {
      'filters@': { },
      'tabledata@': { },
      'graph@': { }
    }
})

请注意，现在将视图名称指定为绝对名称，而不是相对名称。 它的目标是位于未命名的根模板中的'filters' ， 'tabledata'和'graph'视图。 由于未命名，因此'@'没有任何内容。 未命名的根模板是您的index.html。

EXTEND-有一个可行的例子

这是状态定义：

  .state('shell', {
    url: '/shell',
    views: {
      'master' : {
        templateUrl: 'core/views/shell.html',
            controller: 'shellcontroller',
            controllerAs: 'vm',
      },
      'globalNavigationPanel@shell': {
        templateUrl: 'core/views/globalNavigationPanel.html',
            controller: 'globalNavigationPanelController',
            controllerAs: 'gpvm',
      }
    }
  })

这些是意见

templateUrl: 'core/views/shell.html',

<h2>shell</h2>

<p>{{text}}</p>

<hr />

<div class="container-fluid height-full">
   <div ui-view="globalNavigationPanel" class="row"></div> 
   <div ui-view="detail" id="detailContent" class="row"></div>
</div>

templateUrl: 'core/views/globalNavigationPanel.html',

<h3>globalNavigationPanel</h3>

<p>{{text}}</p>

而索引仅包含：

<div ui-view="master" id="ng-view"></div>

在这里检查它的作用