HTML5のドラッグ＆ドロップでのAngularJS指示 - スコープオブジェクトでの問題

Question

私はかなり新しく角度があり、アイテムが押し込まれている場所を頭で囲んでいます。ドラッグ＆ドロップで使用する関数を正しく設定していて、古いスコープオブジェクトにバインドされていてng-repeatが正しく更新されていない場合は、わかりません。私はこのセットアップがある方法に若干の問題があると思っています。どんなポインタや助けも大歓迎です。

DraggableコンテナからDroppableコンテナに色をドラッグすると、スコープオブジェクトアイテムにリンクされているテキストを更新する必要があります。私は正常にオブジェクトを範囲オブジェクトにプッシュしていますが、ng-repeatはそれをピックアップしません。私は時計が必要なのか、新しく追加されたアイテムに注意を払うために何をすべきかわからない。ここで

JSフィドル：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> 

アンギュラ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（誰もが気にならば）

.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

フィビルドにはいくつかのタイプミスがありますが、基本的な問題はドラッグイベントが角度ダイジェストサイクルの外にあることです。 $scope.$apply（コードサンプルが来ている）に変更をラップする必要があります。このフォークされたバグ修正(FIDDLE)は、ボタンをクリックすると、変更が表示され、新しい値で表示がリフレッシュされることが示されています。

修正：(FIDDLE)

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

あなたが持っていたバグが、このコードである：

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

これはおそらくng-repeat="item in items"する必要があり、それは文字列の配列ですので、またアイテムはドロップされたテキストが含まれています元のアイテムオブジェクトではありません。