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

Question

我发现ui是可排序的，并使它能很好地用于简单列表等。我的应用程序已经使用了ui引导程序，我想对手风琴元素进行排序。

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等替换手风琴位，但它不适用于手风琴元素。这是不工作的小提琴。拖拽动作只会拿起整个手风琴。

这是bug还是我做错了什么？

Answer 1

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

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

代码所做的是替换Accordo指令正在包装的模板，所以现在ng repeat是ui可排序指令的直接子级，它应该可以工作。

此外，正如@Dylan所说，我建议使用"处理程序"来防止手风琴在分拣时打开。

Answer 2

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

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

这是Plunkr

我要说的是两人在一起打得不好。

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