AngularJS：在指令中访问子元素

Question

我想美化我的主要HTML并希望使用自己的指令来创建一个标签框。 我想编写选项卡框的代码，如下所示：

<my-tab-box>
  <my-tab label="Tab 1" active="true">Content 1</my-tab>
  <my-tab label="Tab 2">Content 2</my-tab>
</my-tab-box>

Angular应该将上面的代码翻译成：

<div class="tab-box">
  <ul>
    <li class="active">Tab 1</li>
    <li>Tab 2</li>
  </ul>
  <div class="content">
    Content 1
  </div>
</div>

但我不知道如何从tab-box指令中访问tab-box的子元素。我需要这个来获取具有属性access="true"的子元素，并获取子内部HTML以在<div class="content">元素中显示它。

如何实现？ 我是否反对Angular哲学？

谢谢！马尔特

Answer 1

通过查看angular-bootstrap中的实现，您可以最好地了解它是如何工作的： https://github.com/angular-ui/bootstrap/blob/master/src/tabs/tabs.js

基本上，您可以通过将父指令注入到您的子指令（MyTab控制器中的“require：'MyTabBox'”）来使指令协作。

您还需要了解翻译。

在angular的开发者指南中也解释了同样的情况： 请参阅“创建通信指令”部分 https://docs.angularjs.org/guide/directive