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

时间:2014-08-22 08:09:33

标签: 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,所以我甚至不尝试,但这是我想达到的目标。

我在 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>

1 个答案:

答案 0 :(得分:3)

如果我理解你,那一切都是可能的。如下所述:

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

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

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

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

观察here