AngularJS – 可拖动和多个连接的可排序(jQuery UI angular-comm

我设法连接两个sortables,并为每个sortables删除一个draggable,并在sortables内重新排列工作正常(范围项数组按预期更新).实际上UI部分工作正常,但是当我将列表项从一个可排序项拖到另一个时,我似乎无法弄清楚如何更新Angular作用域中的项数组.

厂：

.factory('DragDropHandler',[function() {
    return {
        dragObject: undefined,addObject: function(object,objects,to) {
            objects.splice(to,object);
        },moveObject: function(objects,from,objects.splice(from,1)[0]);
        }
    };
}])

Droppable(可排序)指令：

.directive('droppable',['DragDropHandler',function(DragDropHandler) {
    return {
        scope: {
            droppable: '=',ngUpdate: '&',ngCreate: '&'
        },link: function(scope,element,attrs){
            element.sortable({
              connectWith: ['.draggable','.sortable'],});
            element.disableSelection();
            var list = element.attr('id');
            element.on("sortdeactivate",function(event,ui) {

                var from = angular.element(ui.item).scope().$index;
                var to = element.children().index(ui.item);

                //console.log('from: ' + from + ',to: ' +to);

                if (to >= 0 ){
                    scope.$apply(function(){
                        if (from >= 0) {
                            DragDropHandler.moveObject(scope.droppable,to,list);
                            scope.ngUpdate({
                                from: from,to: to,list: list
                            });
                        } else {

                            scope.ngCreate({
                                object: DragDropHandler.dragObject,list: list
                            });

                            ui.item.remove();
                        }
                    });
                }
            });

            element.on("sortremove",ui) {
              //console.log(element);
              //console.log('a sort item is removed from a connected list and is dragged into another.');
            });
            element.on("sortreceive",ui) {
              //console.log(element);
              //console.log('item from a connected sortable list has been dropped.');
            });
        }
    };
}]);

控制器功能：

$scope.updateObjects = function(from,list) {
    var itemIds = _.pluck($scope.items[list],'id');
    //console.log(itemIds);
};

$scope.createObject = function(object,list) {
    console.log(list);
    console.log($scope.items[list]);
    var newItem = angular.copy(object);
    newItem.id = Math.ceil(Math.random() * 1000);
    DragDropHandler.addObject(newItem,$scope.items[list],to);
};

$scope.deleteItem = function(itemId) {
    $scope.items = _.reject($scope.items,function(item) {
        return item.id == itemId; 
    });
};

并且观点：

<h3>sortable</h3>
<ul
    droppable='items.list1'
    ng-update='updateObjects(from,to)'
    ng-create='createObject(object,list)'
    id="list1" class="sortable">
    <li
        class="ui-state-default"
        ng-repeat="item in items.list1 track by item.id">
        {{ $index }}: {{ item.id }} - {{ item.name }}
        <button
            ng-click='deleteItem(item.id)'
            class='btn btn-xs pull-right btn-danger'>X</button>
    </li>
</ul>
<h3>sortable</h3>
<ul
    droppable='items.list2'
    ng-update='updateObjects(from,list)'
    id="list2" class="sortable">
    <li
        class="ui-state-default"
        ng-repeat="item in items.list2 track by item.id">
        {{ $index }}: {{ item.id }} - {{ item.name }}
        <button
            ng-click='deleteItem(item.id)'
            class='btn btn-xs pull-right btn-danger'>X</button>
    </li>
</ul>

Working example on Plunker.

任何帮助将不胜感激.