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

问题描述

我创建采用了棱角分明的指令选项卡控件。它包括的标签 标签项指令新的范围和标签项头 标签项体< /为其范围未声明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.

如果我理解正确的话这些指令使用标签项指令的范围，因为它们都放在里面。但是，当我尝试在这里面标签项范围内声明的标记性能指标得到它是不确定的。

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>'
};});

我创建了一个普拉克 http://plnkr.co/edit/HkXIOt8FKMw4Ja2GZtF1 p = preVIEW 来证明它。

什么是错的？

推荐答案

（编辑）的意见后，对话提供了一些想法，我想出了一个更好的解决方案。这里是改性普拉克

(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=$p$ PVIEW

这个实现的关键点是：

• 每一个指令transcludes其内容。这意味着，即使最内层的指令可以访问外部范围，如预期。因此，没有更多 $母公司。母公司$ ... 这场可怕。

每一个指令具有隔离范围。按照该文档隔离范围并排侧与transcluded之一;因此指令（在这种情况下，活动标签，每个指数 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.

该指令通过控制器进行通信。这种模式需要一个顶级协调员（这里的设置页所有后代指令和 TabItem的为 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).

顺便说一句，如果你想要的标签，我会建议角UI。

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

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

This was a crazy puzzler.

原因您的问题是， TabItem的指令没有理由transclude其内容;这transclusion创建了完全搞砸了你的逻辑同级范围！

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 /编辑/ 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 /编辑/ tgZqjZk0bRCyZiHKM0Sy？p = preVIEW

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

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