Question

我有3个指令，结构可能如下所示：

<my-component>
    <my-items>
        <my-item="item" ng-repeat="item in MyItems.items">
            {{ item.name }}
            <!-- item.children -->
            <my-items>
                <my-item="item" ng-repeat="item in MyItems.items" />
            </my-items>
        </my-item>
    <my-items>
</my-component>

其中my-items的深度可以是无限的（理论上）。

现在我希望my-component保持用户选择的（ONE！）项并添加一个条件选择类，所以在（〜伪）代码中看起来像这样：

<my-item="item" ng-click="myComponent.selected = item"
                ng-class="{ selected: myComponent.selected == item }" />

我如何在这里知道所选项目是my-component？

我试图在myItems指令中执行此操作：

// itemsComponentController is the controller of my-component
require: "^^itemsComponentController";

但是角度在这里抛出了它找不到这样一个控制器的错误。我在require做错了什么？是不是找不到直接父母的控制器？

我正在努力发出＆＃39; item-selected＆＃39;事件，通过执行scope.$on("item-selected")在控制器中处理，但后来我仍然无法知道myComponent.selected中的<my-item>

有关此问题的（简约？）打字稿版本，请参阅this jsfiddle。

Answer 1

我发现了这个问题！

我不需要控制器的名称，而是需要指令的名称。然后该指令的控制器将作为link函数中的变量传递：

// Require the name of the (parent) directive instead of its controller name
require: "^^myComponent";
link: function(scope, elem, attrs, ctrl) {
    // ctrl is the controller of <my-component>
    // so now I can do ctrl.itemSelected()
}

The working jsfiddle

如何从指令中获取父（/ parent / parent / .. etc）控制器？

1 个答案: