我使用的是用 Yeoman 创建的 index.html
,它看起来像这样:
<html>
<head>...</head>
<body>
<div ng-include="'views/main.html'"></div>
</body>
</html>
现在,我知道我不能在另一个 ng-include
中使用 ng-include
,所以我什至没有尝试,但就是这样我想要实现的目标。
我在我的 main.html 中使用 ui.router
作为嵌套 View ,但我不能这样做:
<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>
最佳答案
如果我对你的理解正确,那一切皆有可能。如此处所述:
最后,我们可以使用两个世界,但我们还必须做一件事:
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
我们可以将标题移动到 View 本身 content.html
<div>
<div ng-include="'views/parts/header.html'"></div>
</div>
观察 here
关于javascript - Angular JS : include partial HTML inside another ng-include,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25442394/