Jquery ui 将项目从一个列表拖动到另一个列表时,角度视图与模型不同步
我创建了一个自定义指令,允许我使用angular js和jquery ui通过拖放连接多个可排序列表。其工作方式如下:Jquery ui 将项目从一个列表拖动到另一个列表时,角度视图与模型不同步,jquery-ui,angularjs,angularjs-directive,Jquery Ui,Angularjs,Angularjs Directive,我创建了一个自定义指令,允许我使用angular js和jquery ui通过拖放连接多个可排序列表。其工作方式如下: 开始拖动时,跟踪项目在数组中的初始位置以及该排序表的ng模型值 当拖动结束时,如果项目被接收到另一个列表,则跟踪该列表的ng模型和元素的目标位置 使用该数据广播事件,以便控制器可以将项目的位置从一个数组更改为另一个数组 问题是,一旦我将一个项目从一个列表移动到另一个列表,即使数组中的项目去了它们应该去的地方,在视图中一些HTML元素就会消失 以下是可排序指令: app.dire
app.directive('mySortable',function(){
return {
link:function(scope,el,attrs){
var options = {};
if(attrs.connectWith)
{
options.connectWith = attrs.connectWith;
}
el.sortable(options);
el.disableSelection();
el.on("sortstart", function(event, ui){
var from_index = angular.element(ui.item).scope()?angular.element(ui.item).scope().$index : 0;
var from_model = angular.element(ui.item.parent()).attr('ng-model');
ui.item.scope().sortableData = {from_index: from_index, from_model: from_model};
});
el.on("sortreceive", function(event, ui){
ui.item.scope().sortableData.to_index = el.children().index(ui.item);
ui.item.scope().sortableData.to_model = angular.element(el).attr('ng-model');
});
el.on( "sortdeactivate", function( event, ui ) {
var to_model = angular.element(el).attr('ng-model');
var from = angular.element(ui.item).scope()?angular.element(ui.item).scope().$index : 0;
var to = el.children().index(ui.item);
if(to>=0){
scope.$apply(function(){
if(from>=0){
scope.$emit('list-sorted', {from:from,to:to}, ui.item.scope());
}else{
scope.$emit('list-appended', {to:to, name:ui.item.text()});
ui.item.remove();
}
})
}
} );
}
}
})
以下是处理其事件的控制器逻辑:
$scope.$on('list-sorted', function(ev, val, task_scope){
var sd = task_scope.sortableData;
if(sd.to_model)
{
$timeout(function(){
$scope[sd.to_model].splice(sd.to_index, 0, $scope[sd.from_model].splice(sd.from_index, 1)[0]);
});
}
else
{
$timeout(function(){
$scope[sd.from_model].splice(val.to, 0, $scope[sd.from_model].splice(val.from, 1)[0]);
});
}
console.log($scope);
});
怎么了
控制器逻辑似乎构成了一个错误 这样好吗
var sd = item_scope.sortableData;
// If the item is supposed to be dropped to a different list, move it from one list to another
if(sd.to_model)
{
console.log("to a different list", val)
$timeout(function(){
$scope[sd.to_model].splice(val.to, 0, $scope[sd.from_model].splice(sd.from_index, 0));
});
}
else
{
console.log("to the same list")
$timeout(function(){
$scope[sd.from_model].splice(val.to, 0, $scope[sd.from_model].splice(val.from, 1)[0]);
});
}
这样DOM可能是正确的,但数组的内容保持不变,因此视图和模型仍然不同步