ng-repeat 和 jquery ui 可排序答案

【问题标题】：ng-repeat and jquery ui sortableng-repeat 和 jquery ui 可排序
【发布时间】：2014-03-26 01:26:12
【问题描述】：

我的 Angular 模板中有一个 ng-repeat，它需要是可排序的。我正在使用 jQuery-ui 的 Sortable 来实现它。

JS：

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

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

模板：

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

这很好用，我可以拖放元素。但是，当一个 ng-repeat 嵌套在另一个中时，它就不起作用了；我无法拖动任何东西。在使用 Chrome 检查器时，我看到“ui-sortable”类根本没有添加到任何元素中。

JS：

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

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

模板：

<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>

为什么会这样？有解决办法吗？

【问题讨论】：

标签： jquery angularjs angularjs-ng-repeat jquery-ui-sortable

【解决方案1】：

这个问题可能出在$('.sortable').sortable()的执行时间上。在设置控制器后，Sortable 会立即查找类名为 sortable 的元素。

那时ng-repeat还没有被初始化，所以$('.sortable')没有找到元素。在下面的 js fiddle 中，控制台中的输出显示了这个问题。 http://jsfiddle.net/Q5FWt/439/

将$('.sortable').sortable() 放入setTimeout 中进行快速修复。然而，操纵 dom 元素从来都不是一种有角度的方式！实现这一点的理想方法是构造一个指令，或使用像这样的 angular-ui 插件，https://github.com/angular-ui/ui-sortable

【讨论】：

从来没有这样想过。谢谢！ setTimeout 不需要以毫秒为单位的时间值吗？
我工作的公司还不允许使用 angular-ui。我将此控制器用于我的代码中的指令。您的意思是说 sortable 本身将作为单独的指令处理？
如果您将控制器用于指令，那么操作 dom 就可以了 :) （至少对我而言）。我认为将 sortable 放入该指令的 link 也可以

【解决方案2】：

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>

【讨论】：