Я работаю над правлением назначения задачи, и у меня есть
проблема при изменении существующих счетов (аккордеон) между
определенным отделением... Список переменных объема становится
обновленным правильно, и код хорошо работает, когда я - аккордеон
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 = [];