Angular JS：在另一个 ng-include 中包含部分 HTML答案

【问题标题】：Angular JS: include partial HTML inside another ng-includeAngular JS：在另一个 ng-include 中包含部分 HTML
【发布时间】：2014-10-16 00:50:17
【问题描述】：

我使用的是用 Yeoman 创建的 index.html，看起来像这样：

<html>
  <head>...</head>
  <body>

    <div ng-include="'views/main.html'"></div>

  </body>
</html>

现在，我知道我不能在另一个ng-include 中使用ng-include，所以我什至没有尝试过，但这是我想要实现的目标。

我在我的 main.html 中使用ui.router 用于嵌套视图，但我不能这样做：

<header class="header">
  <!-- Rather long HTML code that I would like to put in
       a separate file like 'views/parts/header.html' -->

</header>

<div ui-view="" class="container"></div>

一个天真的解决方案是删除第一个 ng-include 并在 main.html 中使用它作为页眉、页脚和类似的东西。

所以，用你所拥有的来打击我，但不要用那个！

编辑：这是我想要的（但不能，因为我已经在ng-include 中）

  <div ng-include="'views/parts/header.html'"></div>
  <div ui-view="" class="container"></div>

【问题讨论】：

标签： javascript angularjs angular-ui-router angularjs-ng-include

【解决方案1】：

如果我能正确理解你，那一切皆有可能。如此处所述：

stateprovider in angularjs - not rendering the ui-view
并在此plunker 中显示

最后，我们可以同时使用这两个世界，但我们还要做一件事：

app.controller('MainCtrl', function($scope, $state, ....){
   $state.go("/");
});

因为ng-include 和ui-router 启动不匹配在一起。一旦目标（即<div ng-include="'views/main.html'"></div>的内容）可用，我们必须强制状态重新加载。

注意：期待 main.html 的内容是这样的：

<div ng-controller="MainCtrl">
    ...
    <div ui-view></div>
</div>

这应该可以解决问题...

EXTEND：如何重新包含？

ui-router 这里的力量似乎是无限的。 我们可以再次*（重新）*使用ng-include，在ui-view 内部。所以不要这样：

<div ng-include="'views/parts/header.html'"></div>
<div ui-view="" class="container"></div> // e.g. filled by content.html

我们可以将标题移动到视图本身content.html

<div>
  <div ng-include="'views/parts/header.html'"></div>
</div>

注意here

【讨论】：

我想你误解了我的问题。路由工作正常，app.run(function($state){}); 在我的app.js 中确保ui.router 状态启动时的正确加载。我只想在 main.html 中添加部分 HTML。请看看我的更新。
事实上，一旦你进入ui-router的世界，你就不会被ng-include限制所束缚。简单地说，将您的兄弟姐妹ng-include 和ui-view 更改为两个兄弟视图<div ui-view="a"><div ui-view="b">。因为正是这种方式是ui-router 设计的。请查看：github.com/angular-ui/ui-router/wiki/Multiple-Named-Views。这有帮助吗？不知怎的……？
我知道命名视图，但我认为情况并非如此。命名视图可以让我在 single 状态下使用多个不同的视图（也可以重复使用）。要添加页眉和页脚（例如），我必须在我使用的每个状态中声明它们......
我扩展了我的答案，还创建了一个 plunker。正如我们所见，ng-include 可能是ui-view 的一部分，由ui-router 注入。这有帮助吗？ （ui-router 是很棒的库；）
@RadimKöhler 是完全正确的。我认为反过来，你误解了 Radim 的解决方案。为了使事情更简单，您可以只感染一个父状态，显示所有页眉和页脚，然后嵌套一个子状态，该子状态将成为您的内容容器。它更干净，你甚至不需要 ng-include 其他任何地方。只值我的 2 美分。