角度指令的范围继承 [英] Scope inheritance for angular directives

问题描述

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

I've created a tab control using angular directives. It is consist of tab, tab-item directives with new scope and tab-item-header, tab-item-body directives for which scope is not declared.

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

If I understand correctly these directives use scope of tab-item directive because they are placed inside it. But when I try to get in markup property index which is declared inside tab-item scope it is undefined.

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=预览以演示它.

I've created a plunk http://plnkr.co/edit/HkXIOt8FKMw4Ja2GZtF1?p=preview to demonstrate it.

怎么了?

推荐答案

(EDIT) 经过评论中的对话，我想出了一些更好的解决方案.这是修改后的 plunk:

(EDIT) Giving some thought after the conversation in the comments, I came up with a better solution. Here is the modified plunk:

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

这个实现的关键点是:

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

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

Every directive has an isolated scope. As per the docs the isolated scope is side-by-side with the transcluded one; therefore all the private state of the directives (in this case the active tab, the index of each tabItem and some directive-specific functions) is kept in the isolated scope.

指令通过控制器进行通信.这种模式需要一个顶级协调器"(这里是所有后代指令的 tab 和 tabItemHeader 和 tabItemBody).

The directives communicate through the controllers. This pattern requires a top level "coordinator" (here the tab for all descendant directives and the tabItem for the tabItemHeader and tabItemBody).

顺便说一句，如果你想要标签，我建议你使用 Angular UI.

By the way, if you want tabs, I would suggest Angular UI.

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

This was a crazy puzzler.

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

The reason for your problem is that the tabItem directive had no reason to transclude its contents; this transclusion created a sibling scope that totally messed up your logic!

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

Thus the answer is simple: remove these lines from the tabItem directive:

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

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

A plunkr with these lines commented out that prints scope ids: http://plnkr.co/edit/bBfEej145s1YjcE9n3Lj?p=preview (this helps with debugging; see what happens when you include these lines, the templates and the linker function see different scopes!)

你的 plunkr 分叉了，注释掉了这些行:http://plnkr.co/edit/tgZqjZk0bRCyZiHKM0Sy?p=预览

And your plunkr forked, with those lines commented out: http://plnkr.co/edit/tgZqjZk0bRCyZiHKM0Sy?p=preview

这篇关于角度指令的范围继承的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！