無法單擊以關閉AngularJS中的手風琴

Question

由於“ div”和“ td”的原因，我無法使用Bootstrap或JQuery手風琴，所以目前我通過一些AngularJS擁有一個手風琴，它是：

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

這使我可以打開手風琴但不能關閉它。 有什么建議么？

這也是我的翡翠供參考：

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

在控制器中處理DOM並不是一個好習慣。 如果要向元素添加行為，請改用指令。

我通常采用的方法是首先查找已經具有所需行為的HTML元素。 否則，我將尋找現有的指令或模塊（例如ngmodules.org ）。 如果找不到任何內容，則會獲得可以在功能方面找到的最接近的元素並將其擴充。

在您的情況下，我考慮將<summary>與<details> 。 為了產生手風琴效果（當另一個打開時折疊），我將創建一個名為group的指令（或類似的東西），該指令將按[group]聚合所有<summary>標簽。

檢查此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>

這三個細節將表現得像手風琴。 當一個打開時，其他關閉。