AngularJS - 扩展元素

Question

我正在使用AngularJS创建FAQ页面，我想要展开/折叠元素。

这是我的HTML：

<div id="faq" class="">
    <div class="faq-item" collapse>
<div class="expend-element">
    <div class="question">
    <div class="text">Question 1</div>
</div>
</div>
<div class="answer">ANSWER 1</div>
</div>
<div class="faq-item" collapse>
<div  class="expend-element">
    <div class="question">
    <div class="text">Question 2</div>
</div>
</div>
<div class="answer">ANSWER 2</div>
</div>
<div class="faq-item" collapse>
<div class="expend-element">
    <div class="question">
    <div class="text">Question 3</div>
</div>
</div>
<div class="answer">ANSWER 3</div>
</div>
</div>

我的指示：

return {
    scope: {},
    template:   "<div class='faq-item' ng-click='expend()' ng-class='{ expended: active }'><div ng-transclude></div></div>",
    replace:    true,
    transclude: true,
    link: function(scope) {
        scope.active = false;
        scope.expend = function() {
            scope.active = !scope.active;
        };
    }
};

这很好用，但它有一个问题。 我的主要目标是扩展只有一个元素，但这扩展了所有元素。

我该怎么做？