angularJs 指令模板移除

【问题标题】：angularJs directive template removalangularJs 指令模板移除
【发布时间】：2013-12-01 17:02:13
【问题描述】：

在每个 Angular 模板中，我们必须定义一个根 html 节点，然后我们可以在其中定义指令的 Html。

是否有角度忽略该根节点的方法？示例：

我的指令模板：

<div class="space consuming div, and absolute positioning breaker"> 
   <div class="content positioned relative to the directives parent 1"></div>
   <div class="content positioned relative to the directives parent 2"></div>
   <div class="content positioned relative to the directives parent 3"></div>
</div>

我们可以将我们的模板设置为

   <div class="content positioned relative to the directives parent 1"></div>
   <div class="content positioned relative to the directives parent 2"></div>
   <div class="content positioned relative to the directives parent 3"></div>

谢谢！

【问题讨论】：

标签： html angularjs angularjs-directive angular-template

【解决方案1】：

如果您在模板中使用replace: true，则只需要一个root 元素。

如果您已经定义了自定义元素并在您的 HTML 中按以下方式使用 then 就会出现这种情况：

<tabs>
    <pane>1</pane>
    <pane>2</pane>
</tabs>

在这种情况下，将tabs 替换为具有两个根的模板会引起一些混乱。

但是，如果您不需要replace: true，那么您可以在您想要的元素上设置指令并在其上分配一个多根模板。该模板将在具有指令的元素内部呈现。

var app = angular.module('plunker', []);

app.directive('myDirectiveOne', function() {
  return {
    template: '<p>Hello</p><p>World!</p>'
  };
})


app.directive('myDirectiveTwo', function() {
  return {
    template: '<p>Hello</p><p>World!</p>',
    replace: true
  };
})

模板

    <!-- works -->
    <div my-directive-one></div>

    <!-- has problem -->
    <div my-directive-two></div>

例如http://plnkr.co/edit/jgEWsaxzfD4FkHcocJys?p=preview

【讨论】：