在 AngularUI 中删除的最后一项已连接可排序

Question

在 Angular 中，我有多个包含块的列。使用 ngRepeat 重复列，并且重复列内的块。使用 Angular-UI 和 jQueryUI，我使块可排序并连接所有列。这很好用，我可以在列之间拖动块，但只有当我将一个块拖到非空列的末尾时，最后一个（新的）块才不会显示。但是，如果您在控制台中记录底层数组，您可以看到该数组已更新为 blockmove。其他手表仍然被调用并显示正确的值（如小提琴所示）

HTML：

<div ng-app="foo" ng-controller="bar">
    <div ng-repeat="column in columns" id="column-{{$index}}" class="column">
        <div class="blocks-wrapper" ui-sortable="columnSortableConfig" ng-model="column.blocks">
            <div ng-repeat="block in column.blocks" class="block" id="block-{{block.id}}">
                {{block.id}}
            </div>
        </div>
    </div>
    {{columns}}
</div>

Javascript：

foo = angular.module('foo', ['ui.sortable']);
foo.controller('bar', function($scope){
    $scope.columns = [{blocks: [{id: 1},{id: 2}]},{blocks: [{id: 3}]}];

    $scope.columnSortableConfig = {
        connectWith: '.blocks-wrapper',
        placeholder: 'block-placeholder',
        forcePlaceholderSize: true,
        tolerance: 'pointer',
    };
});

我在网上四处搜索，将数组中的项目设为非原始 (link) 并将 jQuery 的回调包装在 scope.$apply() (link) 中，但这一切都不起作用。

JSFiddle：http://jsfiddle.net/C5pKc/10/ （要重现，请将块 3 拖到块 2 下）

Answer 1

您使用的是 Angular 1.2.x 吗？如果是这样，请确保您使用的是 angular-ui/ui-sortable 的 angular1.2 branch。这是source file。

this pull request 中描述了该问题。 简而言之，Angular 使用 html cmets 来跟踪 ng-repeat 项目。 Jquery 不关心 cmets。因此，当您在列表之间拖动内容时，cmets 会变得混乱，而 ng-repeat 会感到困惑。希望这会有所帮助！