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', ）

<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>

因为master将包含'globalNavigationPanel'的占位符

另请查看文档

View Names - Relative vs. Absolute Names

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

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

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

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

EXTEND - is a working example

这是州定义：

  .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>

检查行动here

ui-router多个命名的嵌套视图

1 个答案:

View Names - Relative vs. Absolute Names