如何在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中编写可折叠的指令？

回答

相关问题