如何在AngularJS中編寫可摺疊的指令？

我知道有一個可摺疊的指令可用作UI Bootstrap的一部分，但我想創建我自己的（爲了學習如何編寫指令;-)）。如何在AngularJS中編寫可摺疊的指令？

現在我有一個小概念問題。

最後，我想擁有的東西，如：

<collapsible collapsed> 
    <title>foo</title> 
    <body> 
    [...] 
    </body> 
</collapsible>

該指令應創建組件，並顯示它。到現在爲止還挺好。我沒有得到的是如何訪問兩個包含的部分title和body。我看到有ng-transclude，但是這會返回完整的內容。

如果我有兩個單獨的內容，如本例中給出的那樣？

來源

2013-04-22 Golo Roden

兩個單獨的內容意味着您必須從您的指令中訪問/修改DOM。

一些提示（沒有完整的解決方案，因爲你要「寫自己的」;）

你會在你的指令寫一個鏈接功能，具有範圍和元素作爲參數。
```
link: function(scope, element) { ... } 
```
您將使用$看，知道什麼時候你必須隱藏/顯示您身體標籤。
您將使用angular.element在您的標籤標籤上添加和刪除類並顯示或隱藏它。

您還可以查看關於egghead.io上angular.element的視頻25。不是您的問題的確切解決方案，但有點類似。

來源

2013-04-22 14:52:59

你可以使用一些簡單的jQuery方法來遍歷$element中的dom，但是你不會在監聽更改，所以如果這個內容異步改變，你的部件將（可能）不會反映這些更改。相反，你可能會更好地爲每個屬性（自定義ng-transclude）手動進行$ compile編譯並將其注入到你想要的位置，但是有太多變量很難給你一個具體的答案。

來源

2013-05-04 08:53:34 ProLoser

如何在AngularJS中編寫可摺疊的指令？

回答

相關問題