ng repeat和jquery ui可排序

我有一个ng重复在我的角度模板，需要排序。我正在使用jqueryui的Sortable来实现它

JS：

$scope.data = [{"key":123,"val":"a"},
{"key":124,"val":"b"},
{"key":125,"val":"c"}];

$(".sortable").sortable();

$scope.subJson = [{"name":"MS1","slides":[{"title":"Title1"},{"title":"Title2"}]},{"name":"MS2","slides":[{"title":"Title3"},{"title":"Title4"}]}];

$(".sortable").sortable();

模板：

<div class="sortable"> 
    <div ng-repeat="sub in data" >
        {{sub.key}}
    </div>
</div>

<div> 
    <div ng-repeat="sub in subJson" >
        {{sub.name}}
        <div class="sortable">
            <div ng-repeat="slide in sub.slides" >
                {{slide.title}}
            </div>
        </div>
    </div>
</div>

模板：

<div class="sortable"> 
    <div ng-repeat="sub in data" >
        {{sub.key}}
    </div>
</div>

<div> 
    <div ng-repeat="sub in subJson" >
        {{sub.name}}
        <div class="sortable">
            <div ng-repeat="slide in sub.slides" >
                {{slide.title}}
            </div>
        </div>
    </div>
</div>

{{sub.name}}
{{slide.title}}

---

为什么会发生这种情况？有解决方案吗？

可能这个问题在于

$（'.sortable'）.sortable（）的执行时间。

。 Sortable在控制器设置后立即查找classname

Sortable

的元素

此时，

ng repeat

尚未启动，因此，

$（'.sortable'）

找不到任何元素。 在下面的js提琴中，console中的输出显示了这个问题。

一个快速修复程序被放入

$（'.sortable'）.sortable（）

中的

setTimeout

。 然而，操纵dom元素从来不是一种有角度的方式！

---

实现这一点的理想方法是构造一个指令，或者像这样使用angular ui插件，

Sortable

需要重新加载要控制的对象

放入

$（“.sortable”）.sortable（）

；然后在列表的项行中调用该函数

例如：

function init() {
    $(".sortable").sortable();
}

然后在html中：

<div> 
<div ng-repeat="sub in subJson" >
    {{sub.name}}
    <div class="sortable">
        <div ng-repeat="slide in sub.slides" >
            <div class="layer-draggable" 
              ng-mousedown="init()">
                {{slide.title}}
          </div>
        </div>
    </div>
</div>

{{sub.name}}
{{slide.title}}

---

从来没有这样想过。谢谢setTimeout不需要一个以毫秒为单位的时间值吗？我工作的公司还不允许使用angular ui。我将此控制器用于代码中的指令。你的意思是说排序表本身要作为一个单独的指令来处理吗？如果你使用controller for指令，那么操纵dom是可以的：）（至少对我来说是这样）。我认为，在这个指令的

链接中放入sortable也可以