用多个嵌套的 transclude 包装元素

Question

这似乎是一件很简单的事情，但我就是不知道该怎么做。

这是我想要的：

<my-card>
  <my-profile>
     <my-address>101 Some St.</my-address>
     <my-phone>555-555-5555</my-phone>
     <my-description>I have a great profile</mydescription>
  </my-profile>
  <my-option doclick="Option(1)">Do One</my-option>
  <my-option doclick="Option(2)">Do Two</my-option>
</my-card>

变成这样：

<div class="card">
    <div class="profile">
      <div class="Address">101 Some St.</div>
      <div class="Phone">555-555-5555</div>
      <div class="Description">I have a great profile.</div>
    </div>
</div>

Answer 1

我不确定你的数据是什么样的，但你只是在你的指令中使用 Angular 标记：

<my-card>
  <my-profile>
     <my-address>{{user.address}}</my-address>
     <my-phone>{{user.phone}}</my-phone>
     <my-description>{{user.description}}</mydescription>
  </my-profile>
  <my-option doclick="Option(1)">Do One</my-option>
  <my-option doclick="Option(2)">Do Two</my-option>
</my-card>

用多个嵌套的 transclude 包装元素

Wrapping Element with multiple nested transclude

nested

angularjs