无法单击以关闭AngularJS中的手风琴

Question

I CANNOT use the Bootstrap or JQuery accordion because of "div"'s and "td"'s so currently I have an accordion through some AngularJS here it is:

$scope.viewMeasures = function($event) {
  var log = $($($event.target)[0]).closest('tbody');
  $('tbody.measure.selected').hide();
  $('tbody.selected').removeClass('selected');
  $(log).addClass('selected');
  $(log).next('tbody').fadeIn(20);
  $(log).next('tbody').addClass('selected');
} 

This allows me to open the accordion but not close. Any suggestions?

Here is my Jade for reference as well:

body.log(ng-repeat-start="log in logs | orderBy : ['date_created'] : true")
    tr.log(ng-click="viewMeasures($event)", id='{{log._id}}')
      td 
        strong {{log.date_created | date:'MM-dd-yyyy'}}
      td 
        span.static
          strong {{log.name}}
        input.editable.form-control(ng-model='log.name')
      td
        strong {{log.updated_by}}

Answer 1

It is not a good practice to deal with the DOM in controllers. If you want to add behaviour to an element, use directives instead.

The approach I usually take is to first look for an HTML element that already has the behaviour I need. Otherwise I'd look for an existing directive or module ( ngmodules.org for example). If I can't find anything, I get the closest element I can find in terms of functionality and augment it.

In your case, I'd consider using a <summary> with <details> . To give the accordion effect (collapse one when another opens), I'd create a directive called group (or something like this) that would aggregate all <summary> tags by [group] .

Check this JSBin out.

angular.module('gtDetailsGroup', []).
directive('gtGroup', function () {
  var groups = {};

  var directive = { restrict: 'A' };

  directive.compile = function compile (tElement, tAttrs) {
    if (!isDetails(tElement)) return;

    var group = tAttrs.gtGroup;
    (groups[group] || (groups[group] = [])).push(tElement);

    return link;
  };

  function isDetails (element) {
    return element.prop('tagName') === 'DETAILS';
  }

  function link ($scope, iElement, iAttrs) {
    var group = iAttrs.gtGroup;
    iElement.on('click', function () {
      groups[group].filter(function (element) {
        return iElement[0] !== element[0];
      }).forEach(function (element) {
        element.removeAttr('open');
      });
    });    
  }

  return directive;
});

In your app, include gtDetailsGroup as a dependency. Example:

angular.module('MyApp', ['gtDetailsGroup']);

And use it like:

<details gt:group="metrics">...</details>
<details gt:group="metrics">...</details>
<details gt:group="metrics">...</details>

These three details will behave like an accordion. When one opens, the others close.