查找 Angular 指令中的所有元素

Question

我正在尝试在纯 Angular 中实现类似于手风琴的东西。

我有一个常见问题列表，其中隐藏了答案（通过 css 显示：无；）。我希望它能够工作，以便当您单击问题时，会出现答案。如果再次点击问题，答案会再次隐藏。

使用以下指令一切正常：

.directive('toggleOpen', function toggleOpen() {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.bind('click', function () {
                if(element.parent().children().hasClass('open')) {
                    element.parent().children().removeClass('open');
                } else {
                    element.parent().children().addClass('open');
                }
            });
        }
    }
});

所以有一堆 parent().children() 废话的原因是我无法工作的部分。

假设您有 2 个问题，1 和 2。当页面加载时，两个答案都被隐藏。用户点击问题 1，回答 1 取消隐藏。目前，当您单击问题 2 时，答案 2 会取消隐藏，这也是正确的 - 但我只希望一次打开一个答案。因此，如果显示答案 1 并且用户单击问题 2，我希望隐藏答案 1，并显示答案 2。

我有一个 CSS 类 'open' 我正在申请取消隐藏答案。所以基本上 - 我怎样才能找到所有具有“打开”类的元素并将其删除，然后将其应用于用户单击的元素？

有没有“纯粹”的角度方式来做到这一点？

TIA

Answer 1

你可以用模板逻辑来做这一切，不需要指令：

<section ng-class="{open: selected=='q1'}">
  <question ng-click="selected='q1'" ></question>
  <answer></answer>
</section>
<section ng-class="{open: selected=='q2'}">
  <question ng-click="selected='q2'" ></question>
  <answer></answer>
</section>
<section ng-class="{open: selected=='q3'}">
  <question ng-click="selected='q3'" ></question>
  <answer></answer>
</section>