Question

首先，这是我在短伪代码中的问题：

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

这是我的解释：

我有一个父指令<bookd-ui>，它有一个控制器
我有一个子指令<icon>，它应根据通过数据属性传递给它的数据编译其他指令<icon data="someData"></icon>
另外两个指令<icon-static>＆amp; <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

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

1 个答案: