无法使双向数据绑定在数组上工作

I am trying to create kind of a drag and drop playground using AngularJS. The code is on plunker. And to understand the question, mostly you'll need to see the plunker.

我正在尝试用AngularJS创建一个拖放的游乐场。密码在柱塞上。要理解这个问题，大多数情况下你需要看到柱塞。

https://plnkr.co/edit/i82UOOqHRSJyEPN9293E

I am trying to create node like structures here which can be dragged over to the playground on the right side.

我想在这里创建一个节点状的结构可以拖到右边的操场上。

On drag, I am adding the node id to the nodeChain variable in $scope. Now I am iterating the nodeChain array in UI with ng-repeat where I am drawing the node just to check that the nodes added to the chain are reflecting correctly.

在拖动上，我将节点id添加到$scope中的nodeChain变量。现在我在UI中使用ng-repeat迭代节点链数组，我在这里绘制节点，只是为了检查添加到链中的节点是否反映正确。

However,

然而,

I do not see the nodeChain updating from watchCollection logs as well as the nodes drawn on the playground are not updating when new nodes are added.
我没有看到从watchCollection日志中更新的nodeChain，也没有看到在添加新节点时在操场上绘制的节点没有更新。

Can someone please tell me why the binding is not taking effect?

有人能告诉我为什么装订没有生效吗?

Thanks in advance!

提前谢谢!

2 个解决方案

#1

You need to trigger a $digest cycle to update the values. When the $digest cycle starts, it fires each of the watchers. These watchers check if the current value of the scope model is different from last calculated value. If yes, then the corresponding listener function executes. As a result if you have any expressions in the view they will be updated.

您需要触发一个$digest循环来更新值。当$digest周期开始时，它将触发每个观察者。这些观察者检查范围模型的当前值是否与上次计算值不同。如果是，则执行相应的侦听器函数。因此，如果视图中有任何表达式，它们将被更新。

  if (!Bounds.within(event.pageX, event.pageY, leftPane)) {
                    scope.$parent.nodeChain.push(NodeChain.getNodeFromId(attr.nid))
                    scope.$apply();
            }

Working Plunker:https://plnkr.co/edit/SNNsVOZps5Fy35dAQIqk?p=preview

工作恰好:https://plnkr.co/edit/SNNsVOZps5Fy35dAQIqk?p=preview

You are getting ng-repeat dupes error in your console because there are duplicate values in your array nodeChain.

您在控制台中会得到ng-repeat dupes错误，因为在数组nodeChain中有重复的值。

#2

If i understand your question correctly, you want to add the dropped nodes in the below white space. Please see the plunkr.

如果我正确地理解了您的问题，您希望在以下空白区域中添加删除的节点。请参见plunkr。

You should add $scope.apply() when you change the models outside the scope.

当您更改范围之外的模型时，应该添加$scope.apply()。

#1

  if (!Bounds.within(event.pageX, event.pageY, leftPane)) {
                    scope.$parent.nodeChain.push(NodeChain.getNodeFromId(attr.nid))
                    scope.$apply();
            }