如何使用AngularJS创建可折叠手风琴？

Question

我发现ui可以排序,并且它可以很好地用于简单的列表等.我的应用程序已经使用了ui-bootstrap,我想对手风琴元素进行排序.

html看起来不错:

<div ng:controller="controller">
    <accordion ui:sortable ng:model="list">
        <accordion-group ng:repeat="item in list" class="item">
            <accordion-heading>{{item}}</accordion-heading>
        </accordion-group>
    </accordion>
</div>

然而,虽然这适用于为ul/li等交换的手风琴比特,但它不适用于手风琴元素.这是非工作小提琴.拖动动作只是拿起整个手风琴.

这是一个错误还是我做错了什么？

Answer 1

我遇到过这个麻烦.我已经解决了使用$ decorator,这对于编辑第三方库而不触及核心非常有用.确切的代码是:

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

代码所做的是替换accordion指令所包含的模板,所以现在ng-repeat是ui-sortable指令的直接子代,它应该可以工作.

另外,正如@Dylan所说,我建议使用"处理程序"来防止手风琴在排序时打开.