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

我有一个这样的嵌套视图

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

当我设置状态时，我可以看到下载的所有文件和调用的

shellcontroller.js

，但不是

globalNavigationPanelController

此外，我无法看到

globalNavigationPanel

视图更新

---

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

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

这样，我们可以指示UI路由器，即第二个视图，应该被放置到另一个视图的当前状态。你所在州的名称并不明显，但让我们想象一下，它将是“shell”

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

现在，我们的

'shell'

状态的模板应该是（我的意思是

模板URL:'core/views/shell.html'，

）

因为主控形状将包含“globalNavigationPanel”的占位符

同时检查文档

在幕后，每个视图都会被分配一个绝对名称，该名称遵循

viewname@statename

，其中viewname是视图指令中使用的名称，state name是州的绝对名称，例如

contact.item

。您还可以选择以绝对语法编写视图名称

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

请注意，视图名称现在指定为绝对名称，而不是相对名称。它的目标是位于根未命名模板中的

'filters'

、

'tabledata'

和

'graph'

视图。由于未命名，因此

@

后面没有任何内容。根未命名模板是您的index.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>

<h3>globalNavigationPanel</h3>

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

这是州政府的定义：

  .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',
      }
    }
  })

这些是观点

模板URL:'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>

<h3>globalNavigationPanel</h3>

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

而索引只包含：

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

---

在实际操作中检查它

我还尝试了“globalNavigationPanel@:{templateUrl:'core/views/globalNavigationPanel'，…我添加了两个解决方案，每个视图一个”globalNavigationPanel@shell“：它仍然不工作：（.可能是因为我正在使用angular bootstrap并仅向模块注册控制器吗？已解决此问题？app.etrading.register.controller（'globalNavigationPanelController'，globalNavigationPanelController）；是的，我在index.html中拆分了视图。调试时，代码流也会进入shellcontroller，但不会进入globalnavigationpanel控制器。我在office网络中，没有plunker和JSFIDLE。我确实有一个plunker供您使用；）检查我的更新答案。希望这有帮助吗？还是您仍然无法使用它？

<h3>globalNavigationPanel</h3>

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

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