角度指令的范围继承

Question

我使用angular指令创建了一个制表符控件.它由tab,tab-item 指令和新的scope以及tab-item-header,tab-item-body指令组成,未声明范围.

如果我理解正确,这些指令使用tab-item指令的范围,因为它们被放在其中.但是当我尝试获取在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>'
};});

我已经创建了一个插件http://plnkr.co/edit/HkXIOt8FKMw4Ja2GZtF1?p=preview来演示它.

怎么了？

Answer 1

(编辑)在评论中的对话后给了一些想法,我提出了一个更好的解决方案.这是改良的插件:

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

这个实现的关键点是:

• 每个指令都会转换其内容.这意味着,即使是最里面的指令也可以访问外部作用域,如预期的那样.所以没有更多的$parent.$parent...可怕.

• 每个指令都有一个孤立的范围.根据文件,孤立的范围与被抄袭的范围并排; 因此,指令的所有私有状态(在这种情况下为活动选项卡,每个指针tabItem和一些特定于指令的函数)都保存在隔离范围内.

• 指令通过控制器进行通信.这种模式需要一个顶级"协调员"(这里是tab所有后代指令和tabItemfor 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分叉了,这些行注释掉:http://plnkr.co/edit/tgZqjZk0bRCyZiHKM0Sy？p = preview