Тянитесь и Снижение, используя угловую работу со сбоями JS

Я работаю над правлением назначения задачи, и у меня есть проблема при изменении существующих счетов (аккордеон) между определенным отделением... Список переменных объема становится обновленным правильно, и код хорошо работает, когда я - аккордеон jQuery.But, когда я использую угловой JS аккордеон, Перемена счетов аккордеона дублирована.

//   main HTML content

 <!DOCTYPE HTML>


<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>

Task Whiteboard


<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}}   
{{item.content.desc}}
{{item.content.effort}}
{{item.content.owner}}
{{item.content.issues}}
{{item.content.comments}}
{{item.content.dependency}}
</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}}
{{item.content.desc}}
{{item.content.effort}}
{{item.content.owner}}
{{item.content.issues}}
{{item.content.comments}}
{{item.content.dependency}}
</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}}
{{item.content.desc}}
{{item.content.effort}}
{{item.content.owner}}
{{item.content.issues}}
{{item.content.comments}}
{{item.content.dependency}}
</div> </div> </div> <div style="clear:both;"> list 1 size : {{list1.length}}
list 2 size : {{list2.length}}
list 3 size : {{list3.length}}
</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>

'+
    '</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 = [];
1
добавлено
Просмотры: 1
Рассмотрите добавление вашего решения как ответ (тогда принимают его), или удалите этот вопрос так, чтобы это больше не обнаруживалось в "оставшемся без ответа" списке.
добавлено автор Mark Rajcok, источник
Добавьте a jsFiddle пожалуйста,
добавлено автор asgoth, источник
Две ошибки с вашей скрипкой: удалите сценарий в своем CSS разделе и используйте неуменьшенную угловую версию. Чтобы использовать уменьшенную версию, необходимо использовать внедрение зависимости правильно: docs.angularjs.org/guide/di
добавлено автор asgoth, источник
Вы используете более старую версию угловых. Попробуйте версию 1.0.3, сделайте ее мерами что-то.
добавлено автор asgoth, источник
Вы загружаете jQuery дважды. Удалите это от "Выбирает Структуру" или "Управляемые ресурсы". Удостоверьтесь, что это загружается ПЕРЕД jquery-ui и угловое.
добавлено автор asgoth, источник
@asgoth здесь - скрипка jsfiddle.net/TTrdm/40 ... однако, у меня есть некоторая проблема с угловым в нем...
добавлено автор Adithya, источник
@asgoth спасибо за предложения:) это - то, что я получил после выполнения предложенных модификаций... все еще удачу с угловым в скрипке даже при том, что это кажется прекрасным, принимая от локального сервера
добавлено автор Adithya, источник
это - текущая скрипка... jsfiddle.net/TTrdm/38
добавлено автор Adithya, источник
@asgoth... Я зафиксировал скрипку, и теперь мое угловое не функционирует (сопротивление и снижение) даже при том, что оценка аккордеона кажется прекрасной и there' s не проблемы, о которых сообщают в поджигателе также. Here' s скрипка
добавлено автор Adithya, источник
ya я попробовал это также... забавная вещь, является теми же самыми кодовыми работами в локальном сервере, но у меня была проблема дублирования, там... пытающаяся копировать оригинал в jsFiddle, приведшем к этому prob... скрипка
добавлено автор Adithya, источник
Я исправил ту ошибку, сегодня... кажется, что была проблема с использованием углового v1.0.3..., таким образом, я понизил до 1.0.2, и это хорошо работало:)
добавлено автор Adithya, источник