角引导手风琴没有正确折叠答案

【问题标题】：Angular bootstrap accordion not collapsing correctly角引导手风琴没有正确折叠
【发布时间】：2015-09-29 14:49:37
【问题描述】：

我正在处理一个同时使用 Accordion 和 Sortable 的页面，遵循 this Plunker，但是虽然大多数事情都正常运行，但我的手风琴面板没有正确折叠。标题行正确移动，但每个手风琴部分的“正文”没有被隐藏，而是显示在以下标题下。

我查看了示例中发生的情况，似乎当单击标题以折叠面板时，面板会暂时获得一个 collapsing 类，然后将其替换为隐藏的 collapse 类面板。在我的例子中，面板永远不会被赋予collapse 类，所以面板在下面的标题后面仍然可见。无论close-others 的值如何，都会出现这种行为。

这是我的标记的相关部分：

<div ng-controller="myController">
    <accordion close-others="true" ui:sortable="sortableOptions" ng:model="items">
        <accordion-group ng-repeat="item in items">
            <div accordion-heading heading="{{item.name}}">
                <span class="handle btn">&#8597;</span><span>{{item.name}}</span>
            </div>
            {{item.details}}
        </accordion-group>
    </accordion>
</div>

还有 app.js：

var app = angular.module('myApp', ['ui.sortable', 'ui.bootstrap']);

app.config(['$provide', function ($provide){
    $provide.decorator('accordionDirective', function($delegate) { 
        var directive = $delegate[0];
        directive.replace = true;
        return $delegate;
    });
  }]);

app.controller('myController', function($scope){
    $scope.items = [{name: "my item", details: "my details}, ...]
    $scope.sortableOptions = {
        handle: ' .handle',
        axis: 'y'
    };
});

任何人都可以提供解决方案或变通方法吗？

编辑如果有人想玩的话，我已经在this Plunker 中复制了这种行为。

【问题讨论】：

ng:model 而不是 ng-model?
很好看，但这并没有什么不同。

标签： javascript angularjs twitter-bootstrap angular-ui angular-ui-bootstrap

【解决方案1】：

看起来我使用的 jQuery/jQueryUI 版本太新了。我已经降级到 jQuery v2.1.1 和 UI v1.10.0。我还使用了 Bootstrap CSS 的 v3.1.1。我的最终标题如下所示：

<head>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>

    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

    <link href="style.css" rel="stylesheet">
</head>

在正文底部带有以下脚本标记：

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-sortable/0.13.2/sortable.min.js"></script>

<script src="app.js"></script>

结果完全搞砸了我的 CSS，但我可能可以忍受！

【讨论】：