2013-08-23 2 views
3

Я использую angular-ui и начал использовать аккордеоны.Добавить событие ng-click для углового аккордеона

Мне нужно запустить событие ng-click, когда кто-то открывает или закрывает группу аккордеона.

Я сделал некоторые исследования и нашел эту тему: angular-ui issue

Он связан с plunker который показывает решение, которое не является удовлетворительным для моего случая использования.

Вот решения HTML:

<accordion> 
    <accordion-group> 
     <accordion-heading> 
      <span ng-click="foo()">Try clicking me!</span> 
     </accordion-heading> 
     Some Body 3 
    </accordion-group> 
</accordion> 

Однако НГ щелкните событие срабатывает только при нажатии на текст поверочного. Если вы нажмете только вне текста, аккордеон все равно откроется или закрывается без какого-либо события клика.

Чтобы исправить это, я попытался сделать ширины пролетов & высота 100% и настройка дисплея: блок. Я также рассмотрел возможность удаления прокладки целиком, но мне было интересно, есть ли лучший способ, чем взломать его.

Кто-нибудь знает, как прикрепить событие ng-click ко всей группе гармоник? Или как сделать диапазон заполнять всю группу?

Мой весь код:

<accordion close-others="true"> 
    <accordion-group ng-repeat="question in level"> 
     <accordion-heading style="padding: 0"> 
      <div style="display: block; margin: 0px" ng-click="set_question(question.title)">{{ question.title }}</div> 
      <i class="icon-check" ng-show="has_solved_all"></i> 
     </accordion-heading> 
     <span ng-bind-html-unsafe="question.content"></span> 
    </accordion-group> 
    </accordion> 
    <br> 
    Question Open: {{ question_open }} 
+0

Возможный дубликат [Ручной поиск/сбой событий Аккордеона в Угловом] (http://stackoverflow.com/questions/15642082/handle-open-collapse-events-of-accordion-in-angular) –

ответ

2

Зачем вам нужен ng-click конкретное решение? Существует атрибут is-open, который вы можете посмотреть, и который срабатывает при открытии/закрытии аккордеона.

+1

Возможно, я смогу использование открыто. Я ищу документацию сейчас. Моя проблема более конкретно в том, что у меня есть вопрос ng-repeat = «в вопросах». Каждый вопрос открывается в гармонике. Затем вниз в нижней части страницы говорится, какой вопрос вы просматриваете. –

+2

Похож на http://stackoverflow.com/a/15642577/860421. Это? – 0xc0de

+1

oops - выглядит похоже. В любом случае - я думаю, мы можем отметить этот вопрос как дубликат. –

0

Создать верхний DIV уровня под аккордеон заголовком или переместить

<i class="icon-check" ng-show="has_solved_all"></i> 

внутри элемента DIV -

<div style="display: block; margin: 0px" 

Это должно сделать магии. Ниже работает Ме-

<accordion-group ng-repeat="group in groups" > 
    <accordion-heading> 
    <div ng-click="opened(group, $index)"> 
     <span>{{group.title}}</span> 
    </div> 
    </accordion-heading> 
    {{group.content}} 
</accordion-group>  

Modify и проверьте в журнале консоли plunker http://plnkr.co/edit/B3LC1X?p=preview . Я знаю, что вопрос старый, но другие могут использовать этот ответ.

Смежные вопросы