AngularJS directives avec HTML5 faites glisser et déposez — le problème avec l'objet de l'étendue

Je suis assez nouveau dans angulaire et je vais avoir un moment difficile de l'emballage de ma tête autour de l'endroit où les éléments sont en train d'être poussé. Je ne suis pas sûr si je suis paramétrer correctement les fonctions pour être utilisé avec le glisser/déposer et si son être lié à une ancienne objet de l'étendue et de la ng-repeat n'est pas mis à jour correctement. Je pense il y a un léger problème avec la façon que j'ai de cette configuration. Tous les pointeurs ou de l'aide serait grandement appréciée.

Ce qui devait arriver est lorsque vous faites glisser une couleur de la Déplaçable récipient dans le Drop, conteneur, il devrait mettre à jour le texte qui est liée à la portée éléments de l'objet. Je suis avec succès en poussant un article sur le champ d'application de l'objet, mais ng-repeat n'est pas le ramasser. Je ne suis pas sûr si j'ai besoin d'une montre ou ce qu'il faut faire pour l'avoir à payer attention aux nouveaux éléments ajoutés.

JS Fiddle Ici: http://jsfiddle.net/RV23R/

CODE HTML:

<div ng-app="my-app" ng-controller="MainController">
<div class="container">
    <header><h1>Draggables</h1></header>
    <section>
        <div draggable="true" ng-repeat="drag_type in drag_types">{{drag_type.name}}</div>
    </section>
</div>
<div class="container">
    <header><h1>Drop Schtuff Here</h1></header>
    <section droppable="true">
        <div><span>You dragged in: </span><span ng-repeat="items in items">{{item.name}},</span></div>
    </section>
</div>

ANGULAIRE CODE:

var module = angular.module('my-app', []);
module.directive('draggable', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element[0].addEventListener('dragstart', scope.handleDragStart, false);
element[0].addEventListener('dragend', scope.handleDragEnd, false);
}
}
});
module.directive('droppable', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element[0].addEventListener('drop', scope.handleDrop, false);
element[0].addEventListener('dragover', scope.handleDragOver, false);
}
}
});
function MainController($scope)
{
$scope.drag_types = [
{name: "Blue"},
{name: "Red"},
{name: "Green"},
];
$scope.items = [];
$scope.handleDragStart = function(e){
this.style.opacity = '0.4';
e.dataTransfer.setData('text/plain', this.innerHTML);
};
$scope.handleDragEnd = function(e){
this.style.opacity = '1.0';
};
$scope.handleDrop = function(e){
e.preventDefault();
e.stopPropagation();
var dataText = e.dataTransfer.getData('text/plain');
$scope.items.push(dataText);
console.log($scope.items);
};
$scope.handleDragOver = function (e) {
e.preventDefault(); //Necessary. Allows us to drop.
e.dataTransfer.dropEffect = 'move';  //See the section on the DataTransfer object.
return false;
};
}

CSS (si quelqu'un se soucie)

.container {
width: 600px;
border: 1px solid #CCC;
box-shadow: 0 1px 5px #CCC;
border-radius: 5px;
font-family: verdana;
margin: 25px auto;
}
.container header {
background: #f1f1f1;
background-image: -webkit-linear-gradient( top, #f1f1f1, #CCC );
background-image: -ms-linear-gradient( top, #f1f1f1, #CCC );
background-image: -moz-linear-gradient( top, #f1f1f1, #CCC );
background-image: -o-linear-gradient( top, #f1f1f1, #CCC );
box-shadow: 0 1px 2px #888;
padding: 10px;
}
.container h1 {
padding: 0;
margin: 0;
font-size: 16px;
font-weight: normal;
text-shadow: 0 1px 2px white;
color: #888;
text-align: center;
}
.container section {
padding: 10px 30px; 
font-size: 12px;
line-height: 175%;
color: #333;
}

OriginalL'auteur Skylude | 2013-10-24