Question

我找到了ui sortable并且让它很好地用于简单列表等。我的应用程序已经使用了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等交换的手风琴比特，但它对手风琴元素不起作用。 Here is the non working fiddle。拖动动作只是拿起了整个手风琴。

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

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所说，我建议使用＆＃34;处理程序＆＃34;在排序时防止手风琴打开。

Answer 2

我建议在排序选项中使用句柄，但它似乎没有帮助。

$scope.sortableOptions = {
    handle: '.handle'
}

这是Plunkr

我要说2只是不能很好地一起玩。

你可能会有更好的运气http://jimliu.github.io/angular-ui-tree/

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

2 个答案: