ui-路由器多个命名嵌套视图

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，即第二个视图应该置于当前状态的其他视图中。您所在州的名称不是很明显，但让我们想象一下，它将是 '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>

因为 master 将包含 'globalNavigationPanel'

的占位符

同时查看文档

View Names - Relative vs. Absolute Names

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

For example, the previous example could also be written as:

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

Notice that the view names are now specified as absolute names, as opposed to the relative name. It is targeting the 'filters', 'tabledata', and 'graph' views located in the root unnamed template. Since it's unnamed, there is nothing following the '@'. The root unnamed template is your 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-路由器多个命名嵌套视图

ui-router multiple named nested views

javascript

angularjs

angularjs-bootstrap

angular-ui-router

View Names - Relative vs. Absolute Names