AngularJS 指令，它可以编译另一个可以访问父控制器的指令

Question

首先是我在一个简短的伪代码中遇到的问题：

<book-ui>
    <icon> <!-- can access controller -->
    <icon-static> <!-- compiled and can not access controller -->
    <icon-animated><!-- compiled can not access controller -->
</book-ui>

这是我的解释：

1. 我有一个父指令<bookd-ui>，它有一个控制器
2. 我有一个子指令<icon>，它应该根据通过数据属性<icon data="someData"></icon> 传递给它的数据编译其他指令
3. 另外两个指令<icon-static> 和<icon-animated> 应该能够访问<book-ui> 控制器（它们是<book-ui> 的孩子）

这是我的例子，<icon> 指令根据某些条件成功编译了另外两个指令，<icon> 指令可以访问<book-ui> 控制器。

http://jsfiddle.net/poul_kg/Q5uHV/6/

当我将require: '^bookUi' 添加到<icon-static> 或<icon-animated> 指令（它们是编译指令）时，问题出现了。将require: '^bookUi' 添加到<icon> 指令时没有任何错误。

我为什么这样做。我想在书上添加图标，所有图标都具有相同的数据结构，但根据其类型的不同表现完全不同，所以我认为将它们分成两个不同的指令会很好。而且在模板中我更容易使用：

<icon ng-repeat="icon in book.pages[currentPage].icons" data="book.pages[currentPage].icons[$index]"></icon>

或者我应该在这里使用某种| filter: 表达式吗？

Answer 1

在实际实现中你不需要icon 指令。

您可以使用filter: {type_id: 1} 之类的过滤器，您的指令结构将如下所示

<book-ui>
    <icon-static data="el" ng-repeat="el in elements | filter: {type_id: 1}"></icon-static>
    <icon-animated data="el" ng-repeat="el in elements | filter: {type_id: 2}"></icon-animated>
</book-ui>

你也可以要求父指令require: '^bookUi'

查看更新的fiddle