Найти все элементы в Угловой директиве

Question

Я пытаюсь реализовать что-то похожее на аккордеон в чистом угловом.

У меня есть список часто задаваемых вопросов, с ответами скрытых (через css display: none;). Я хочу, чтобы он работал так, что, когда вы нажимаете на вопрос, появляется ответ. Если вы снова нажмете на вопрос, ответ снова скрывается.

Это все работает отлично, используя следующую директиву:.

.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'); 
       } 
      }); 
     } 
    } 
}); 

Так что причина есть куча родителей() дети() вздор часть я не мог работать.

Предположим, у вас есть 2 вопроса, 1 и 2. Когда страница загружается, оба ответа скрыты. Пользователь нажимает на вопрос 1 и отвечает на 1 показ. В настоящее время, когда вы нажимаете на вопрос 2, ответьте на 2 неоткрытых, что также правильно, но я только хочу, чтобы один ответ открывался одновременно. Поэтому, если отображается ответ 1, и пользователь нажимает вопрос 2, я хочу ответить 1, чтобы скрыть, и ответить 2, чтобы показать.

У меня есть класс css 'open', который я применяю, чтобы отображать ответы. Итак, в основном - как я могу найти ВСЕ элементы, имеющие класс 'open', и удалить его, а затем применить его к элементу, на который пользователь нажал?

Есть ли «чистый» угловой способ сделать это?

ТИА

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>