Javascript 带'；崩塌'；指令未调用expandDone（）

我正在一个项目中使用Angular（）的UI引导，并且我已经创建了一个指令，它将UI引导中的

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

这意味着决不会在我的div上设置

height:auto

，因此当我的内容增长时，div不会增长，部分内容会被切断

collapseDone（）

方法在折叠时也不会被调用

现在，如果我点击应用程序中的另一个元素（在arSection之外），就会调用

collapseDone（）

和

expandDone（）

方法

看起来它们是排队运行的，但据我所知，这些方法只有在

collapse

指令发生apply/digest时才被调用。单击另一个组件似乎会间接触发到达collapse指令的apply/digest，因此队列回调最终完成，但为时已晚

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

collapseDone（）

和

expandDone（）

我猜这与角度示波器或手表有关，但我看不出我缺少的链接

更新：我已经用这个

arSection

指令编写了一个命令，但它按预期工作。单击第一节标题以将其设置为打开动画。然后单击内容使其变大。第二节标题向下移动。但在我的实际项目中，第二节标题保持不变，即使第一节中的内容变大了。更大的内容刚刚被切断

---

如果您在HTML运行时检查它，您可以看到“正在塌陷”类在其动画制作时被添加到div中并被删除。“Collasing”类确实会添加到我的实际代码中，但它不会被删除（至少在我单击触发应用/摘要的某个地方之前是如此）。

我认为Angular UI的accordion在这里是一个很好的用例，但是为了学习，这里有一些有用的东西：

使用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（）

没有被调用

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

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

---

你能告诉我你在哪个浏览器和它的哪个版本上试过这个吗？Chrome版本40.0.2214.91（64位）是我工作的主要版本。在你的项目中，你可能有一些样式规则被覆盖。使用样式控制台在你的应用程序和plunker之间比较应用的样式。非常好奇为什么你不使用angular ui中内置的accordion？这是一个angular项目，我从另一个开发人员那里接手，所以我不确定是否有理由在accordion上写这篇文章，但似乎可以用手风琴来代替这个指令。我明天会看一看。对不起，我根本不知道这和我的问题有什么关系。我错过了你上面的问题，所以现在我明白你为什么要发布这个了。似乎两者都对你有用。此实现基于您的实现。您会注意到，

ng单击

会使用变量当前状态的否定赋值来更改变量。除非继承的代码有非常具体的原因，即更新值和操纵元素标记的ajax调用，否则我不会使用该指令。

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