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>

角应将上述代码转换为如下内容：

<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">元素中显示它。

如何认识到这一点？我是在违背角度哲学吗？

谢谢!马尔特

Answer 1

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

基本上，您可以通过将父指令注入您的子指令(在您的MyTabBox控制器中插入"require：‘MyTab’“)来协作这些指令。

你也需要理解隐蔽性。

在https://docs.angularjs.org/guide/directive的开发指南中也解释了同样的场景:参见https://docs.angularjs.org/guide/directive中的“创建通信指令”一节