1

我知道作为 UI Bootstrap 的一部分有一个可折叠的指令，但我想创建自己的一个（为了学习如何编写指令;-)）。

现在我有一个小概念问题。

最后，我想要的是：

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

该指令应该创建组件并显示它。到目前为止，一切都很好。我不明白的是如何访问这两个包含的部分title和body. 我已经看到有ng-transclude，但这会返回完整的内容。

如果我有两个单独的内容，如本例所示，该怎么办？

4

2 回答 2

1

两个单独的内容意味着您必须从指令访问/修改 DOM。

一些提示（没有完整的解决方案，因为您想“编写自己的”；）

  • 您将在指令中编写一个链接函数，其中范围和元素作为参数。

    link:  function(scope, element) { ... }

  • 您将使用 $watch 知道何时必须隐藏/显示您的身体标签。

  • 您将使用 angular.element 在您的body标签上添加和删除一个类并显示或隐藏它。

您还可以在 egghead.io 上查看有关 angular.element 的视频25。不是您问题的确切解决方案，但有些相似。

于 2013-04-22T14:52:59.150 回答
0

您可以使用一些简单的 jQuery 方法来遍历 dom 中的 dom $element，但是您不会监听更改，因此如果此内容被异步更改，您的小部件将（可能）不会反映这些更改。

相反，您最好为每个属性（自定义 ng-transclude）手动执行 $compile 并将其注入您想要的位置，但是变量太多，很难给您一个具体的答案。

于 2013-05-04T08:53:34.997 回答