Question

在每个角度模板中我们必须定义一个根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>

谢谢！

Answer 1

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

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

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

E.g。 http://plnkr.co/edit/jgEWsaxzfD4FkHcocJys?p=preview

angularJs指令模板删除

1 个答案: