1

我有这样的嵌套视图

<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视图更新。

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

4

1 回答 1

2

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

这样，我们可以指示 UI-Router 将第二个视图放入当前状态的另一个视图中。您所在州的名称是什么并不明显，但让我们假设它是“shell”

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

现在，我们的'shell'状态模板应该是（我的意思是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>

在此处查看实际情况

于 2015-04-24T05:26:36.343 回答