Angular UI Bootstrap的<tab>指令的工作方式如何工作？

Question

我目前正在嘗試創建一個指令，該指令具有兩個transcluded部分，並且迄今尚未成功。現在我發現Angular UI Bootstrap的tab指令就是這樣做的！不幸的是，他們脫離in their source code的角度技巧顯然過於理解。

在the examples，他們有下面的代碼：

<tabset> 
    <tab select="alertMe()"> 
    <tab-heading> 
     <i class="glyphicon glyphicon-bell"></i> Alert! 
    </tab-heading> 
    I've got an HTML heading, and a select callback. Pretty cool! 
    </tab> 
</tabset> 

這正是我需要的。有人可以向我解釋我需要採取的步驟嗎，以便<tab-heading>的內容在一個位置被轉移，而另一個位置在另一個位置被轉移？

事情我不來源理解：

• 只有沒有指令tabHeading一個tabHeadingTransclude。那麼<tab-heading>元素如何找到？我也沒有看到任何地方的這種元素的查詢。
• 我也不理解兩個transclude指令tabContentTransclude和tabHeadingTransclude。

Answer 1

您ALMOST了它，當你在看tabHeadingTransclude指令。下面幾行是tabContentTransclude指令。看看源代碼here。

最終，要麼tab-heading屬性或<tab-heading>指令的內容被放置在{{heading}}表達式內的tab模板here。

您可以從tabContentTransclude指令的link功能蒐集這樣的：我們設置tab.headingElement我們都看在tabHeadingTransclude指令的節點（tab-heading屬性或<tab-heading>指令）的值。當它發生變化時，我們更新模板。