使用HTML5拖放的AngularJS指令——范围对象的问题

我对angular是个新手，我很难在物品被推到的地方思考。我不确定我是否正确设置了用于拖放的函数，以及它是否绑定到较旧的范围对象，并且ng repeat是否没有正确更新。我想我的设置方式有点小问题。任何指点或帮助都将不胜感激

应该发生的是，当您将颜色从可拖动容器拖动到可拖放容器中时，它应该更新链接到范围对象项的文本。我正在成功地将项目推送到scope对象上，但ng repeat没有拾取它。我不知道我是否需要一块手表，或者如何让它注意新添加的项目

JS小提琴在这里：

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>

CSS（如果有人在乎的话）

---

小提琴中有几个输入错误，但基本问题是你的拖动事件超出了角度摘要周期。您应该将您的更改包装在

$scope.$apply

（代码示例即将提供）中。此分叉和错误修复显示，当您单击按钮时，angular将显示更改并用新值刷新显示

修正：

代码中有一个bug：

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

{{item.name}，

---

这可能是

ng repeat=“item in items”

，而且items只包含删除的文本，因此它是一个字符串数组，而不是原始的item对象。

是的，我在JS Fiddle中有一些人，因此它可能已被更改。谢谢你的帮助！

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

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

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