0

在每个 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>

谢谢！

4

1 回答 1

0

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

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

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

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

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

JS 

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

于 2013-12-01T09:02:13.423 回答