UI Bootstrap for Angular 带有 'collapse' 指令，不调用 expand

UI Bootstrap for Angular with 'collapse' directive not calling expandDone()

本文关键字：调用 expand 指令 collapse 带有 for UI Bootstrap Angular      更新时间：2023-09-26

我正在一个项目中使用 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时，UI Bootstrap 中的 expandDone() 方法（见下文）在动画完成时不会被调用。

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

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

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

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

似乎它们排队等待运行，但据我了解，这些方法仅在 collapse 指令发生应用/摘要时调用。 单击另一个组件似乎间接触发了到达 collapse 指令的应用/摘要，因此最终进行了排队的回调，但为时已晚。

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

我猜它与 Angular 示波器或手表有关，但无法完全看到我缺少的链接。

更新：我已经用这个arSection指令组装了一个 Plunker，但它按预期工作。 单击"第一部分"标题以动画方式将其打开。 然后单击内容以使其变大。 第二部分标题向下移动。 不过，在我的实际项目中，即使第一部分的内容变大，第二部分的标题也会保留在原处。 更大的内容被切断了。

如果在 HTML 运行时检查它，您可以看到"折叠"类在动画化时被添加和删除到div 中。 "折叠"类确实被添加到我的实际代码中，但它不会被删除（至少在我单击触发应用/摘要的某个地方之前不会）。

我认为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>

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

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

angular.module('app', ['ngAnimate']);
相关文章：