具有 HTML5 拖放功能的 AngularJS 指令——范围对象问题

Question

我对 Angular 还很陌生，我很难理解项目被推到的位置。我不确定我是否正确设置了用于拖/放的函数，以及它是否绑定(bind)到较旧的范围对象并且 ng-repeat 未正确更新。我认为我的设置方式存在一些小问题。任何指示或帮助将不胜感激。

应该发生的情况是，当您将颜色从 Draggable 容器拖动到 Droppable 容器时，它应该更新链接到范围对象项的文本。我成功地将一个项目推送到范围对象上，但 ng-repeat 没有拾取它。我不确定我是否需要一 block watch ，或者如何让它关注新添加的项目。

JS fiddle 在这里:http://jsfiddle.net/RV23R/

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>

Angular 代码:

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

fiddle 中有几个拼写错误，但基本问题是您的拖动事件超出了 Angular 摘要周期。您应该将更改包装在 $scope.$apply 中(即将提供代码示例)。这个 fork 并修复了错误 (FIDDLE)显示当您单击按钮时， Angular 会显示更改并使用新值刷新显示。

修复:(FIDDLE)

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

您遇到的错误位于此代码中:

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

这可能应该是 ng-repeat="item in items"，而且 items 只包含删除的文本，因此它是一个字符串数组，而不是原始 item 对象。