javascript - Angular Directive(指令)的范围继承

Question

我使用 Angular Directive(指令)创建了一个选项卡控件。它由具有新作用域的tab、tab-item指令和tab-item-header、tab-item-body<组成/strong> 未声明范围的指令。

如果我理解正确的话，这些指令使用 tab-item 指令的范围，因为它们被放置在其中。但是，当我尝试获取在选项卡项范围内声明的标记属性索引时，它是未定义的。

app.directive('tabItemHeader', function(){
return {
    require: '^tabItem',
    transclude: true,
    template: '<div ng-click="$parent.setCurrentTab(index)" ng-transclude></div>',
};});

app.directive('tabItemBody', function(){
return {
    require: '^tabItem',
    transclude: true,
    template: '<div ng-show="index==$parent.currentTabIndex"><div ng-transclude></div></div>'
};});

我创建了一个 plunk http://plnkr.co/edit/HkXIOt8FKMw4Ja2GZtF1?p=preview来证明它。

怎么了？

Answer 1

(编辑)在评论中的对话后进行了一些思考，我想出了一个更好的解决方案。这是修改后的插件:

http://plnkr.co/edit/djNk8PPzXvngZOvAirMu?p=preview

这个实现的要点是:

• 每个指令都包含其内容。这意味着，正如预期的那样，即使是最里面的指令也可以访问外部范围。所以不再$parent.$parent...可怕。

• 每个指令都有一个独立的范围。根据文档，隔离范围与嵌入范围并排；因此指令的所有私有(private)状态(在本例中为事件选项卡、每个 tabItem 的索引和一些特定于指令的函数)都保存在隔离范围内。

• 指令通过 Controller 进行通信。此模式需要顶级“协调器”(这里是所有后代指令的 tab 和 tabItem 和 tabItemHeader 的 tabItemBody)。

顺便说一句，如果你想要选项卡，我建议使用 Angular UI。

---

这是一个疯狂的益智游戏。

你的问题的原因是 tabItem指令没有理由嵌入其内容；这种包含创建了一个兄弟作用域，完全打乱了你的逻辑!

因此答案很简单:从 tabItem 中删除这些行指令:

// REMOVE THEM!!!
transclude: true,
template: '<div ng-transclude></div>',

注释掉这些行的 plunkr 打印范围 ID:http://plnkr.co/edit/bBfEej145s1YjcE9n3Lj?p=preview (这有助于调试；看看当您包含这些行时会发生什么，模板和链接器函数会看到不同的范围!)

然后你的 plunkr fork 了，这些行被注释掉了:http://plnkr.co/edit/tgZqjZk0bRCyZiHKM0Sy?p=preview