javascript Angular JS：在另一个 ng-include 中包含部分 HTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25442394/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular JS: include partial HTML inside another ng-include
提问by domokun
I'm using an index.htmlcreated with Yeoman, that looks something like this:
我正在使用index.html与 Yeoman 一起创建的，看起来像这样：
<html>
<head>...</head>
<body>
<div ng-include="'views/main.html'"></div>
</body>
</html>
Now, I know that I cannot use an ng-includeinside another ng-include, so I don't even try that, but that's the objective that I want to achieve.
现在，我知道我不能使用ng-includeinside another ng-include，所以我什至不尝试这样做，但这就是我想要实现的目标。
I'm using ui.routerin my main.htmlfor the nested views, but I cannot do something like this:
我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>
One naive solution would be to eliminate the first ng-includeand use it in the main.htmlfor header, footer and stuff like that.
一个天真的解决方案是消除第一个ng-include并在main.html 中使用它作为页眉、页脚和类似的东西。
So, hit me with what you've got, but not with that!
所以，用你所拥有的打我，但不要用那个！
Edit:this is what I would love to have (but can't, since I'm already inside an ng-include)
编辑：这是我想要的（但不能，因为我已经在里面了ng-include）
<div ng-include="'views/parts/header.html'"></div>
<div ui-view="" class="container"></div>
采纳答案by Radim K?hler
If I do understand you properly, that all is possible. As described here:
如果我真的理解你，那一切都是可能的。如此处所述：
- stateprovider in angularjs - not rendering the ui-view
- and shown here in this plunker
At the end, we can use both worlds, but we have to do one more thing:
最后，我们可以使用两个世界，但我们还必须做一件事：
app.controller('MainCtrl', function($scope, $state, ....){
$state.go("/");
});
Because the ng-includeand ui-routerstartup do not match together. We have to force state reload once the target (i.e. the content of our <div ng-include="'views/main.html'"></div>)is available.
因为ng-include和ui-router启动不匹配。一旦目标（即我们的内容<div ng-include="'views/main.html'"></div>）可用，我们必须强制状态重新加载。
NOTE: expecting the content of main.html like this:
注意：期望 main.html 的内容是这样的：
<div ng-controller="MainCtrl">
...
<div ui-view></div>
</div>
That should solve the issue...
那应该可以解决问题...
EXTEND: How to re-include?
EXTEND：如何重新包含？
The ui-routerpower here seems to be unlimited.We can *(re)*use the ng-includeagain, inside of the ui-view. So instead of this:
ui-router这里的力量似乎是无限的。我们可以 *(re)*ng-include再次使用ui-view. 所以而不是这个：
<div ng-include="'views/parts/header.html'"></div>
<div ui-view="" class="container"></div> // e.g. filled by content.html
We can move the header into the view itself content.html
我们可以将标题移动到视图本身 content.html
<div>
<div ng-include="'views/parts/header.html'"></div>
</div>
Observe that here
注意这里
