javascript - 无法点击关闭 AngularJS 中的 Accordion

Question

由于“div”和“td”，我无法使用 Bootstrap 或 JQuery Accordion ，所以目前我通过一些 AngularJS 有一个 Accordion ，它是:

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

这允许我打开 Accordion 但不能关闭。有什么建议吗？

这也是我的 Jade 供引用:

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

在 Controller 中处理 DOM 并不是一个好的做法。 如果您想向元素添加行为，请使用指令。

我通常采取的方法是首先查找已经具有我需要的行为的 HTML 元素。否则我会寻找现有的指令或模块(例如 ngmodules.org )。如果我找不到任何东西，我会获取在功能方面能找到的最接近的元素并对其进行增强。

就你而言，我会考虑使用 <summary> 与 <details> 。为了产生 Accordion 效果(当另一个打开时折叠一个)，我创建一个名为 group 的指令。 (或类似的东西)将聚合所有 <summary>标签 [group] .

检查this JSBin出来。

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

在您的应用中，包含 gtDetailsGroup作为依赖。示例:

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

并像这样使用它:

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

这三个细节将表现得像 Accordion 。当其中一个打开时，其他的就会关闭。