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的指令（或类似的东西），它会按<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>

这三个细节就像手风琴一样。当一个人打开时，其他人就会关闭。

无法点击关闭AngularJS中的手风琴

1 个答案: