Angular JS:在另一个ng-include中包含部分HTML

dom*_*kun 7 javascript angularjs angularjs-ng-include angular-ui-router

我正在使用index.htmlYeoman创建的,看起来像这样:

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

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

  </body>
</html>
Run Code Online (Sandbox Code Playgroud)

现在,我知道我不能ng-include在另一个内部使用ng-include,所以我甚至不尝试,但这是我想要实现的目标.

ui.router在我的main.html中使用嵌套视图,但我做不到这样的事情:

<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>
Run Code Online (Sandbox Code Playgroud)

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

所以,用你所拥有的东西打我,但不是那个!


编辑:这是我希望拥有的(但不能,因为我已经在里面了ng-include)

  <div ng-include="'views/parts/header.html'"></div>
  <div ui-view="" class="container"></div>
Run Code Online (Sandbox Code Playgroud)

Rad*_*ler 3

如果我确实正确理解了你,那么一切皆有可能。正如这里所描述的:

最后,我们可以使用两个世界,但我们还必须做一件事:

app.controller('MainCtrl', function($scope, $state, ....){
   $state.go("/");
});
Run Code Online (Sandbox Code Playgroud)

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

注意:期望 main.html 的内容如下:

<div ng-controller="MainCtrl">
    ...
    <div ui-view></div>
</div>
Run Code Online (Sandbox Code Playgroud)

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

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
Run Code Online (Sandbox Code Playgroud)

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

<div>
  <div ng-include="'views/parts/header.html'"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

观察这里