javascript - 利用angularjs在html中嵌入html

Question

我有一个html文件a.html，如下：

<p>
  a.html
</p>

我想利用angularjs在a.html嵌入另外一个b.html，如下:

<p>
  b.html
</p>

希望的结果如下：

<p>
  a.html
  <p>
    b.html
  </p>
</p>

请问如何实现？

Answer 1

ng-include 简单, 但是,要实现复杂结构比较困难
ng-transcode 灵活,容易实现复杂的HTML结构,但是要单独写directive (指令)

angular.module('transclude', [])
 .directive('pane', function(){
    return {
      restrict: 'E',
      transclude: true,
      scope: { title:'@' },
      template: '<p style="border: 1px solid black;">' +
                  '<p style="background-color: gray">{{title}}</p>' +
                  '<p ng-transclude></p>' +
                '</p>'
    };
});

代码'<p ng-transclude></p>'相当于一个插入点, 类似Web组件规范中的插入点概念.

当你在模版中的HTML元素上使用 <pane> 这个指令的时候, <pane>中的内容可以被插入到ng-transcode定义的位置

例如:

<pane title="{{title}}">{{text}}</pane>

另外,如果你不想在指令中拼接模版字符串, 你可以使用templateUrl替代template

细节请参考: http://angular.duapp.com/api/ng.directive:ngTransclude

Answer 2

<p>
  a.html
  <bhtml></bhtml>
</p>

angular
    .module('app')
    .directive('bhtml',function(){
        return {
            templateUrl:'/b.html',
            restrict:'E',
            replace:true
        }
    })

这个差不多可以做到lz想要的效果了。但是比较麻烦一点，简单点的办法会多一个标签：

<p>
  a.html
  <p ng-include="/b.html"></p>
</p>

结果:

<p>
  a.html
  <p ng-include="/b.html">
    <p>
        b.html
    </p>
  </p>
</p>

Answer 3

ng-include..

Answer 4

set transclued: true in your directive, and put transclude in your directive template where you want to embed another html template

Answer 5

a.html

<p>
    hello a
    <dv ng-include="b.html"></p>
</p>

b.html

<p>
    hello b
</p>

Answer 6

ui-router