Question

我正在编写使用jQueryUI进行多次拖放的指令。按住CTRL并选择元素，您可以进行多次排序。它工作正常，除非元素没有改变位置（我拖动它，然后将它返回到同一个地方）。在这种情况下，虽然模型很好，但元素已经消失，并且它正确地显示了所有元素。

这是小提琴，因为我所做的一切。 http://jsfiddle.net/ndamnjanovic/swt48/3/

这就是为什么我尝试手动插入HTML节点，以防在同一位置返回元素。但在这种情况下，在我使用ui.item.after(elements).detach()插入元素后，元素会丢失相关的操作（点击它不会再触发alertCity）。这是其他方法的小提琴。 http://jsfiddle.net/ndamnjanovic/EkVTW/11/

任何想法是什么问题？

Answer 1

我认为你已经自欺欺人地认为Angular正在为你管理这个清单（而且我也是这样，过去一小时;））。由于您正在使用的jQuery插件，可排序<ul>的DOM似乎不再受Angular的控制。他们可能会在某个时刻重新渲染某些内容，将其包装在容器中等等。但这意味着你负责DOM。删除后，您需要将删除的元素（draggedElements）重新插入列表中的正确位置。

或者......你可以欺骗Angular为你管理列表。首先，将ng-if="cities"添加到您的可排序<ul>，然后在drop回调结束时添加此代码：

                var temp = scope.collection.slice(0);
                scope.$apply(function(scope) {
                    while (scope.collection.length) scope.collection.pop();
                });
                scope.$apply(function(scope) {
                    for (var i = 0; i < temp.length; i++) scope.collection.push(temp[i]);
                });

ng-if指令会导致angular重新呈现内部组件（并重新初始化任何内部指令），只要值从false更改为true。在这种情况下，我们使用两次调用$apply来首先为集合提供一个有价值的值，然后恢复其内容。这会使ng-if线路跳闸并导致列表重新渲染。

示例：http://jsfiddle.net/colllin/8dcXB/

AngularJS多次拖放

1 个答案: