Question

我在项目中使用UI Bootstrap for Angular（http://angular-ui.github.io/bootstrap/），我已经创建了一个指令，它包含来自UI Bootstrap的collapse指令，如下所示：

app.directive( 'arSection', ['$timeout', function($timeout) {
   return {
      template: '<div class="section" ng-class="{\'collapsed\': collapsed, \'open\': !collapsed}">' +
                '    <h4 ng-click="toggleCollapsed()">' +
                '        <span class="dropdown-ctrl" ng-class="{\'icon-chevron-right\': collapsed, \'icon-chevron-down\': !collapsed}"></span>{{title}}' +
                '    </h4>' +
                '    <div collapse="collapsed" class="section-content">' +
                '        <div ng-transclude></div>' +
                '        <div class="clear"></div>' +
                '    </div>' +
                '</div>',
      restrict: 'E',
      scope: true,
      transclude: true,
      replace: true,
      link: function( scope, elem, attrs ){
         scope.title = attrs.title;

          // Toggle the open/closed state and save it away
          scope.toggleCollapsed = function() {
              scope.collapsed = !scope.collapsed;
          };

          scope.collapsed = true;
         }
      }
   };
} ] );

这主要有用，因为点击h4元素会导致其下方的div展开和折叠，但是，在展开div时，expandDone()方法会动画完成后，不会调用UI Bootstrap（见下文）。

function expandDone() {
  element.removeClass('collapsing');
  element.addClass('collapse in');
  element.css({height: 'auto'});
}

这意味着我的div上永远不会设置height: auto，所以当我的内容增长时，div不会增长，而且某些内容会被切断。

折叠时也永远不会调用collapseDone()方法。

现在，如果我点击应用中的另一个元素（在arSection之外），则会调用collapseDone()和expandDone()方法！

似乎他们排队等待运行，但根据我的理解，只有在collapse指令发生应用/摘要时才会调用这些方法。单击另一个组件似乎间接触发了达到collapse指令的apply / digest，因此排队的回调最终完成，但为时已晚。

我不明白的是如何在动画完成后立即触发apply / digest，以便在正确的时间调用collapseDone()和expandDone()。

我猜它与Angular示波器或手表有关，但是看不到我错过的链接。

更新： 我已将Plunker与此arSection指令放在一起，但它按预期工作。单击Section One标题以将其打开动画。然后单击内容以使其更大。第二节标题向下移动。然而，在我的实际项目中，即使第一部分中的内容变得更大，第二部分标题也保持不变。更大的内容被切断了。

如果在运行时检查HTML，您可以看到“折叠”类在动画中添加并删除到div。 “collapsing”类确实会添加到我的实际代码中，但它不会被删除（至少在我点击触发apply / digest的地方之前）。

Answer 1

我认为Angular UI的手风琴在这里是一个很好的用例，但是，为了学习，这里有一些工作：Plunker

使用ng-init和ng-click可以避免大量的逻辑和编码。这里不需要控制器逻辑/指令

<div class="container" ng-controller="CollapseDemoCtrl">
    <h3>Click the section headers to expand them</h3>
    <hr>
    <div class="col-md-12">
        <h3 class="" ng-init="showContentOne=false" ng-click="showContentOne= !showContentOne">
        <i ng-class="showContentOne ? 'fa fa-angle-down' : 'fa fa-angle-right'"></i> Show Content One</h3>
        <div ng-show="showContentOne" class="well well-lg" ><h5>Tons of content one</h5></div>
    </div>
    <div class="col-md-12">
        <h3 class="" ng-init="showContentTwo=false" ng-click="showContentTwo=!showContentTwo">
        <i ng-class="showContentTwo ? 'fa fa-angle-down' : 'fa fa-angle-right'"></i> Show Content Two</h3>
        <div ng-show="showContentTwo" class="well well-lg" ><h5>Content!!</h5></div>

    </div>
</div>

Answer 2

我在调查为什么我的手风琴没有自动调整大小以适应动态内容后到达这里。我正在深入研究这个指令，并且像你一样注意到expandDone()没有被调用。

我通过安装ngAnimate并将其作为依赖项添加来解决了这个问题：

angular.module('app', ['ngAnimate']);

用于Angular的UI Bootstrap，其'collapse'指令未调用expandDone（）

2 个答案: