Question

我正在开发一个任务分配板，我在移动某些div之间的现有标签（手风琴）时遇到问题...范围变量列表正在正确更新，当我是jQuery手风琴时代码工作正常。但是当我使用角度js手风琴，手风琴标签的移动会重复。

//   main HTML content

 <!DOCTYPE html>
<html ng-app="App">

<title>Task WhiteBoard</title>
<head>
<meta charset="utf-8" />   
<meta name="description" content="AngularJS + jQuery UI Drag-n-Drop" />

    <link rel="stylesheet/less" type="text/css" href="css/main.less" />
    <link href="css/zippy.css" rel="stylesheet">
    <link href="css/jquery-ui-1.9.2.custom.min.css" rel="stylesheet"          
             type="text/css" />
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <script src="js/jquery-1.8.1.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>

    <script src="js/angular.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script> 
    <script src="js/less-1.1.6.min.js"></script> 
<meta charset="utf-8" />
<title>Angular Drag and Drop</title>
</head>


<body ng-controller="dndCtrl" ng-cloak>
<h3>Task Whiteboard</h3>


<div class='list1' droppable value='1' >    

<div class='header'>
    Free Tasks
</div>

<div class="below-header">

</div>

<div  ng-repeat="item in list1" data-index="{{$index}}" draggable>
    <div class="zippy" zippy-title="{{item.name}}"> 
            {{item.content.newLabel}}   <br/>
            {{item.content.desc}}   <br/>
            {{item.content.effort}} <br/>
            {{item.content.owner}}  <br/>
            {{item.content.issues}} <br/>   
            {{item.content.comments}}   <br/>
            {{item.content.dependency}} <br/>
    </div>  
</div>  
</div>  

<div class='list2' droppable value='2'> 

<div class='header'>
    Claimed Tasks
</div>

<div class="below-header">

</div>

<div ng-repeat="item in list2" data-index="{{$index}}" draggable> 
    <div class="zippy" zippy-title="{{item.name}}">
            {{item.content.newLabel}}   <br/>
            {{item.content.desc}}   <br/>
            {{item.content.effort}} <br/>
            {{item.content.owner}}  <br/>
            {{item.content.issues}} <br/>   
            {{item.content.comments}}   <br/>
            {{item.content.dependency}} <br/>
    </div>  
</div>  
</div>

<div class='list3' droppable value='3'>

<div class='header'>
    Completed Tasks
</div>

<div class="below-header">

</div>

<div ng-repeat="item in list3" data-index="{{$index}}" draggable>
        <div class="zippy" zippy-title="{{item.name}}"> 
            {{item.content.newLabel}}   <br/>
            {{item.content.desc}}   <br/>
            {{item.content.effort}} <br/>
            {{item.content.owner}}  <br/>
            {{item.content.issues}} <br/>   
            {{item.content.comments}}   <br/>
            {{item.content.dependency}} <br/>
        </div>  
</div>
</div>  


<div style="clear:both;">
    list 1 size : {{list1.length}}  <br/>
    list 2 size : {{list2.length}}  <br/>
    list 3 size : {{list3.length}}  <br/>
</div>
</body>
</html>



    //    services.js



//This makes any element droppable
//Usage: <div droppable></div>
App.directive('droppable', function ($compile) {
return {
    restrict: 'A',
    link: function (scope, element, attrs) {
        scope.$watch(function (value) {
            //This makes an element Droppable
            element.droppable({
                drop: function (event, ui) {
                var dragIndex =    
   angular.element(ui.draggable).data('index');

 if(angular.element(ui.draggable).parent().hasClass('list1') && 
  element.attr('value')=='2') {

 scope.list2.push(scope.list1[dragIndex]);
 scope.list1.splice(dragIndex, 1);
    } 
 else if (angular.element(ui.draggable).parent().hasClass('list2') &&  
   element.attr('value')=='3') {

                 scope.list3.push(scope.list2[dragIndex]);                          scope.list2.splice(dragIndex, 1);
                        //  alert("list2 size : "+scope.list2.length);
                    }
                    else if (angular.element(ui.draggable).parent().hasClass('list2') && element.attr('value')=='1') {
                        scope.list1.push(scope.list2[dragIndex]);                         
                        scope.list2.splice(dragIndex, 1);
                        //  alert("list3 size : "+scope.list3.length);
                    }
                    scope.$apply();
                }
            });
        });
    }
};
});

//zippy directive to give an accordion feel

App.directive('zippy', function(){
return {
    restrict: 'C',
    // This HTML will replace the zippy directive.
    replace: true,
    transclude: true,
    scope:{ title:'@zippyTitle' },
    template:'<div>'+
    '<div class="title">{{title}}</div>'+
    '<div class="body" ng-transclude></div><hr/>'+
    '</div>',
    // The linking function will add behavior to the template
    link: function(scope, element, attrs) {
        // Title element
        var title = angular.element(element.children()[0]),
        // Opened / closed state
        opened = true;
        // Clicking on title should open/close the zippy
        title.bind('click', toggle);

        // Toggle the closed/opened state
        function toggle() {
            opened = !opened;
            element.removeClass(opened ? 'closed' : 'opened');
            element.addClass(opened ? 'opened' : 'closed');
        }

        // initialize the zippy
        toggle();
    }
}
});


     //    In controller .js


    $scope.list1 = [
{ 
    name: 'Intelligent Design', 
    content:    {
        newLabel : 'Create New Label',
        desc : 'Add Description',
        effort : 'Burned effort',
        owner : 'Owner',
        issues : 'Issues',
        comments : 'Comments',
        dependency : 'Dependency'
    }
},  
{
    name: 'Good Artist\'s Copy', 
    content:    {
        newLabel : 'Create New Label',
        desc : 'Add Description',
        effort : 'Burned effort',
        owner : 'Owner',
        issues : 'Issues',
        comments : 'Comments',
        dependency : 'Dependency'
    }
},  

{
    name: 'Task Creation', 
    content:    {
        newLabel : 'Create New Label',
        desc : 'Add Description',
        effort : 'Burned effort',
        owner : 'Owner',
        issues : 'Issues',
        comments : 'Comments',
        dependency : 'Dependency'
    }
}]
$scope.list2 = [ 
    {
    name: 'Task4', 
    content:    {
        newLabel : 'Create New Label',
        desc : 'Add Description',
        effort : 'Burned effort',
        owner : 'Owner',
        issues : 'Issues',
        comments : 'Comments',
        dependency : 'Dependency'
    }
}]
$scope.list3 = [];

使用角度JS故障拖放

0 个答案: