Angular JS：在另一个ng中包含部分HTML

 

我使用的是使用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>

如果我确实了解你，那一切都是可能的。 如下所述：

  • angularjs中的stateprovider - 不呈现ui视图
  • 并在这里显示这个笨蛋

    • 最后，我们可以使用两个世界，但我们必须做更多的事情： 

    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权力似乎是无限的。 我们可以*（重新）*在ui-view再次使用ng-include 。 所以不是这样的： 

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

    在这里观察

    链接地址: http://www.djcxy.com/p/22481.html

    上一篇: Angular JS: include partial HTML inside another ng

    下一篇: Flask signals: why is it not ok to modify data on signal?