Javascript AngularJS使用1.2在列表之间拖放

我一直在使用AngularJS和jQuery UI的拖放实现：

使用AngularJS 1.0.8，它可以完美地工作。对于1.2.11，它没有

使用AngularJS 1.2并将项目从左侧列表拖动到右侧列表时，目标列表的模型将正确更新。但是，DOM没有正确更新。下面是示例中使用的指令：

app.directive('dndBetweenList', function($parse) {

  return function(scope, element, attrs) {

    // contains the args for this component
    var args = attrs.dndBetweenList.split(',');
    // contains the args for the target
    var targetArgs = $('#'+args[1]).attr('dnd-between-list').split(',');

    // variables used for dnd
    var toUpdate;
    var target;
    var startIndex = -1;

    // watch the model, so we always know what element
    // is at a specific position
    scope.$watch(args[0], function(value) {
        toUpdate = value;
    },true);

    // also watch for changes in the target list
    scope.$watch(targetArgs[0], function(value) {
        target = value;
    },true);

    // use jquery to make the element sortable (dnd). This is called
    // when the element is rendered
    $(element[0]).sortable({
        items:'li',
        start:function (event, ui) {
            // on start we define where the item is dragged from
            startIndex = ($(ui.item).index());
        },
        stop:function (event, ui) {
            var newParent = ui.item[0].parentNode.id;

            // on stop we determine the new index of the
            // item and store it there
            var newIndex = ($(ui.item).index());
            var toMove = toUpdate[startIndex];

            // we need to remove him from the configured model
            toUpdate.splice(startIndex,1);

            if (newParent == args[1]) {
                // and add it to the linked list
                target.splice(newIndex,0,toMove);
            }  else {
                toUpdate.splice(newIndex,0,toMove);
            }

            // we move items in the array, if we want
            // to trigger an update in angular use $apply()
            // since we're outside angulars lifecycle
            scope.$apply(targetArgs[0]);
            scope.$apply(args[0]);
        },
        connectWith:'#'+args[1]
    })
  }
});

---

是否需要更新某些内容才能在Angular 1.2中正常工作？我觉得它与

范围有关。$apply

但不确定。

我认为这是一个较老的问题，但我最近在拖放示例中遇到了完全相同的问题。我不知道angular 1.0.8和1.2之间发生了什么变化，但似乎是摘要周期导致DOM出现问题<代码>范围。$apply将触发摘要周期，但

范围。$apply本身并不是问题所在。任何导致循环的因素都可能导致DOM与模型不同步

我能够使用ui.sortable指令找到问题的解决方案。我使用的特定分支位于此处：。我没有测试过其他分支

您可以在此处查看工作示例：


使用ui可排序解决方案，“dndBetweenList”指令将替换为ui可排序指令。然后有一些改变要做

在HTML中

<div class="row">
<div class="span4 offset2">
      <ul ui-sortable="sortableOptions" ng-model="source" id="sourceList"  ng-class="{'minimalList':sourceEmpty()}" class="connector">
        <li class="alert alert-danger nomargin" ng-repeat="item in source">{{item.value}}</li>
      </ul>
    </div>
<div class="span4">
      <ul ui-sortable="sortableOptions" id="targetList" ng-model="model" ng-class="{'minimalList':sourceEmpty()}" class="connector">
        <li class="alert alert-info nomargin" ng-repeat="item in model">{{item.value}}</li>
      </ul>
    </div>
  </div>

ctrl-dnd.js

$scope.sortableOptions  = {
    connectWith: '.connector'
}

仅显示对控制器的添加。注意，我在ul上添加了一个.connector类。在排序表中，我使用.connector作为connectWith选项

$scope.sortableOptions  = {
    connectWith: '.connector'
}