javascript - Angular JS : include partial HTML inside another ng-include

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

我使用的是用 Yeoman 创建的 index.html,它看起来像这样:

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

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

  </body>
</html>

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

我在我的 ma​​in.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 并在 ma​​in.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-includeui-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/

相关文章:

javascript - Angular - router.navigate() 不重定向到目标页面

javascript - 重新组织对象的javascript数组

javascript - 如何在 angular($window).bind() 中访问它?

javascript - Angular JS - 重新加载整个页面

angularjs - 如何重定向到外部 URL

javascript - Angular 1.5 中的组件通信

angularjs - ui-router - 重新加载当前状态

javascript - JQuery 委托(delegate) IE8

javascript - Bootstrap Affix 的替代方案

javascript - 事件点击 href <a> 标签