如何使用 AngularJS 创建可排序的手风琴？

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

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

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

这是Plunkr

我要说的是 2 人在一起玩得不好。

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

Answer 2

我遇到了这个麻烦。我已经使用 $decorator 解决了，这对于在不触及核心的情况下编辑第三方库非常有用。确切的代码是：

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

代码所做的是替换手风琴指令包装的模板，因此现在 ng-repeat 是 ui-sortable 指令的直接子代，它应该可以工作。

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