Question

我有两个由我的指令呈现的列表。要求是用户可以将项目从一个列表移动到另一个列表。我有一个简化的实现如下： -

以上显示了它应该如何表现的演示。请注意，我操纵模型，DOM与它自动同步。

然而，问题是我正在使用jquery-ui-sortable插件。因此，用户可以将项目从一个列表拖放到另一个列表。由于jQuery不知道AngularJs所以它修改了DOM。现在在我的指令中，我已经放置了代码来将底层模型与更改后的DOM同步。

以下jsfiddle代码是我的代码的简化版本。

http://jsfiddle.net/5Xuz2/1/

相关的代码段为： -

$('#btn').on('click', function () {
    var li = $('#left li').first().detach();
    $('#right').prepend(li);
    console.log('moved top DOM to right list');

    angular.element('#left').scope().$apply(function () {
        // The moment this code runs, the DOM related to i is
        // marked with $$NG_REMOVED, and is removed from page.
        // Also somehow the DOM related to item D too is removed.

        i = itemsl.shift(); // i is global variable.
    });
    angular.element('#right').scope().$apply(function () {
        itemsr.unshift(i);
        console.log('synced data with DOM');
    });
});

我实施的问题是，只要我同步左侧列表模型，右侧列表就会清空。

我的实施有什么问题？
有更好的方法吗？

Answer 1

这里的问题是你用Angular和jQuery操作DOM ...如果删除这段代码

var li = $('#left li').first().detach();
$('#right').prepend(li);

它按预期工作

顺便说一句。我建议尝试使用angular-UI而不是jQueryUI

编辑：或者您可以尝试将代码重构为此类

var itemsl, itemsr, i, move;

function Model(name) {
    this.name = name;
}

function Ctrl($scope) {
    itemsl = $scope.itemsl = [new Model('A'), new Model('B'), new Model('C')];
    itemsr = $scope.itemsr = [new Model('D')];
    move = function() {
        $scope.$apply(function() {
            i = itemsl.slice(0,1);
            itemsl.splice(0,1);
            itemsr.unshift(i[0]);
            i = null;
        });
    }
}

$(function () {
    $('#btn').on('click', function () {
        console.log('moved top DOM to right list');
        move();
    });
});

如何在外部修改重复的DOM时同步ngRepeat监视的模型？

1 个答案: