AngularJS Direktiven mit HTML5 Drag & Drop - Problem mit Scope-Objekt

Question

Ich bin relativ neu zu eckig und ich habe eine harte Zeit, um meinen Kopf herum zu wickeln, wohin die Gegenstände geschoben werden. Ich bin mir nicht sicher, ob ich die Funktionen, die mit Drag & Drop verwendet werden sollen, korrekt eingerichtet habe und ob sie an ein älteres Scope-Objekt gebunden werden und die ng-repeat nicht korrekt aktualisiert wird. Ich denke, es gibt ein kleines Problem mit der Art, wie ich dieses Setup habe. Alle Hinweise oder Hilfe würden sehr geschätzt werden.

Wenn Sie eine Farbe aus dem Draggable-Container in den Droppable-Container ziehen, sollte der Text aktualisiert werden, der mit den Bereichsobjektobjekten verknüpft ist. Ich schiebe erfolgreich ein Objekt auf das Zielobjekt, aber ng-repeat hebt es nicht auf. Ich bin mir nicht sicher, ob ich eine Uhr brauche oder was ich tun muss, damit sie auf die neu hinzugefügten Gegenstände achtet. Hier

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

HTML-Code:

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

WINKELCode:

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 (wenn jemand kümmert)

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

Answer 1

Es gibt ein paar Tippfehler in der Geige, aber das grundlegende Problem ist, dass Ihre Ziehereignisse außerhalb eines eckigen Digest-Zyklus liegen. Sie sollten Ihre Änderungen in $scope.$apply (Codebeispiel kommt) einpacken. Diese geteilte und fehlerhafte (FIDDLE) zeigt, dass, wenn Sie auf die Schaltfläche klicken, eckig die Änderungen anzeigt und die Anzeige mit neuen Werten aktualisiert.

Fix: (FIDDLE)

$scope.$apply(function() { 
    $scope.items.push(dataText); 
}); 

Ein Fehler, den Sie in diesem Code hatte:

<span ng-repeat="items in items">{{item.name}},</span> 

Dies ist wahrscheinlich ng-repeat="item in items" sein sollte, auch nur Elemente enthält, die abgelegte Text, so dass es ein Array von Strings ist und nicht die ursprünglichen Objektobjekte.