列表之間的AngularJS拖放以1.2分隔

Question

我一直在使用AngularJS和jQuery UI的拖放實現：

http://www.smartjava.org/examples/dnd/double.html

使用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一起正常工作？ 我覺得這與scope.$apply但不確定。

Answer 1

我看到這是一個比較老的問題，但是最近我在“拖放”示例中遇到了完全相同的問題。 我不知道在角度1.0.8和1.2之間發生了什么變化，但這似乎是導致DOM問題的摘要循環。 scope.$apply將觸發摘要循環，但是scope.$apply本身並不是問題。 任何導致周期的事情都可能導致DOM與模型不同步。

我可以使用ui.sortable指令找到該問題的解決方案。 我使用的特定分支在這里： https : //github.com/angular-ui/ui-sortable/tree/angular1.2 。 我尚未與其他分支機構進行過測試。

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

http://plnkr.co/edit/atoDX2TqZT654dEicqeS?p=preview

使用ui-sortable解決方案，將'dndBetweenList'指令替換為ui-sortable指令。 然后要進行一些更改。

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

請注意，不再需要dnd-between-list指令，並將其替換為ui-sortable。

在模塊中注入ui-sortable，並在控制器中指定該sortable選項。 sortable接受與jquery sortable相同的選項。

app.js

var app = angular.module('dnd', ['ui.sortable']); 

CTRL-dnd.js

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

僅顯示控制器的添加項。 請注意，我在ul上添加了.connector類。 在可排序中，我將.connector用於connectWith選項。