Angular UI Bootstrap Accordion Добавление класса в заголовок

У меня есть следующий аккордеон, который отлично работает

<accordion-group is-open="open.first">
        <accordion-heading>
          My Title
        </accordion-heading>
</accordion-group>

Директива "Accordion-heading" переводится как

    <h4 class="panel-title">
    <a class="accordion-toggle" 
accordion-transclude="heading" ng-click="toggleOpen()" href="">
My Title
    </h4>

Что я хочу, так это то, что когда кто-то нажимает на эту опцию/заголовок аккордеона, нужно добавить, чтобы переключить класс в атрибуте h4. В jquery я бы сделал так

$('.panel-heading .panel-title').on('click', function () {   
    $(this).toggleClass('actives'); 
 });

Я думаю, что должен сделать это как директиву, но не совсем уверен, как это сделать?


javascript accordion angularjs twitter-bootstrap
person StevieB    schedule 16.01.2015    source источник
comment
Используя инструменты разработчика f12, я вижу, что панель имеет добавленный класс, когда она открыта.   -  person Jacob Brewer    schedule 16.01.2015
comment
Оттуда вы можете сделать что-то вроде: $(this).addClass('someClass'); $(mySelector).trigger('cssClassChanged') $(otherSelector).bind('cssClassChanged', data, function(){ делать вещи});   -  person Jacob Brewer    schedule 16.01.2015
comment
это панель содержимого, панель заголовков ничего не добавляется при переключении   -  person StevieB    schedule 16.01.2015
comment
Когда я пытаюсь добавить его как чистый jquery, он, похоже, не срабатывает, я думаю, из-за загрузки страницы и просмотра загрузки в разное время и т. д. Я думаю, что его нужно добавить через директиву   -  person StevieB    schedule 16.01.2015
comment
измененная копия из docs.angularjs.org/guide/animations myModule.directive('my-directive ', ['$animate', function($animate) { return function(scope, element, attrs) { element.on('click', function() { // найти все элементы с классом 'in' внутри }); }; }]);   -  person Jacob Brewer    schedule 16.01.2015
comment
Посмотрите на этот ответ: stackoverflow.com/questions /21764606/   -  person Jacob Brewer    schedule 16.01.2015

Ответы (1)


arrow_upward
0
arrow_downward

Предполагая, что вы используете ng-repeat в своей директиве <accordion-group>, вы можете сделать что-то вроде этого:

<accordion-group ng-repeat="group in groups" ng-init="group.isOpen = false" ng-class="{'open': group.isOpen}" is-open="group.isOpen">

Это инициализирует новую переменную $scope в ng-init с именем isOpen, которая присоединена к отдельной группе, над которой вы повторяетесь (group.isOpen). В моем примере выше я сделал его ложным, чтобы все группы аккордеонов закрывались при загрузке, а затем присвоил этой переменной значение is-open. Когда вы щелкаете или «открываете» одну из групп аккордеона, директива автоматически меняет group.isOpen на true. Это позволит выражению ng-class также оценить true и добавить класс "open" к заголовку панели в DOM.

person Robert Henderson    schedule 16.07.2015