한 목록에서 다른 목록으로 항목을 끌 때 각도보기가 모델과 일치하지 않음

Question

각도 j 및 ​​jquery UI를 사용하여 끌어서 놓기를 통해 여러 정렬 가능한 목록을 연결할 수있는 사용자 지정 지시문을 만들었습니다. 작동해야하는 방법은 다음

1. 드래그가 시작되면 드래그가 종료되면, 경우, 배열에있는 항목의 초기 위치 및 그 정렬
2. 에 대한 NG 모델의 값을 추적 항목이 다른 목록으로 수신되고 해당 목록의 ng 모델과 요소의 목표 위치를 추적합니다.
3. 컨트롤러가 항목의 위치를 ​​하나의 배열에서 다음 위치로 변경할 수 있도록 해당 데이터로 이벤트를 브로드 캐스트합니다. 다른

문제는 일단 한 항목을 한 번 이동하면 배열의 항목이 필요한 위치로 이동하더라도보기에서 일부 HTML 요소가 사라집니다. 여기

는 정렬 지침입니다 :

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);   
}); 

어떤 문제가?

는

Example JS Fiddle

Answer 1

컨트롤러 로직 오류가 부합 할 것으로 보인다.

은 다음과 같이 잘 그것을인가 :

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]);     
     });  
    }