Javascript 角度-具有DIV元素样式的双向数据绑定

我正在使用Angular和jQueryUI构建一个拖动界面。我想使用angularJS的原因是，我想要angularJS 2路数据绑定，这真是太棒了

这是密码笔-

在代码笔中，您将看到一个文本框——“hello everyone”（div#layer）。我确实用棱角分明的

top:{{layer.data.top}}px;left: {{layer.data.left}}px

并在同一个层.data.top和层.data.left中添加了两个同样具有ng模型的输入字段； 因此，当您更改输入字段中的值时，它将移动div元素。到目前为止，这个效果很好

但我还使用angular指令中的jqueryUI使“hello everyone”div可拖动。因此，您可以拖动该元素

我现在想要的是，如果我拖动“hello everyone”div元素，它还将更新layer.data.left和layer.data.top。

---

因此，这也会更改输入字段中的值。我该怎么做呢？

您可以尝试以下方法：

Top : <input id='top' type="text" ng-model="layer.data.top">
Left : <input id='left' type="text" ng-model="layer.data.left"> 

$scope.getInfo = function (layer) {
  var el = document.getElementById('layer');
  layer.data.left = parseInt(el.style["left"]);
  layer.data.top = parseInt(el.style["top"]);
}

---

您可以在图层div上为

mouseup

添加一个事件侦听器，它调用一个相应更改图层数据的函数， 因此，它将是：

1-在控制器内定义如下功能：

Top : <input id='top' type="text" ng-model="layer.data.top">
Left : <input id='left' type="text" ng-model="layer.data.left"> 

$scope.getInfo = function (layer) {
  var el = document.getElementById('layer');
  layer.data.left = parseInt(el.style["left"]);
  layer.data.top = parseInt(el.style["top"]);
}

2-将

ng mouseup=“getInfo（图层）”

添加到图层div

---

这是一个更新的

在两个答案的帮助下，我最终使用了以下更新-

我刚刚更新了拖动事件函数中的代码-

drag: function( event, ui ) 
{
    scope.layer.data.left = ui.position.left;
    scope.layer.data.top = ui.position.top;
    scope.$apply();
}

这是最新的代码笔-

---

这是一个好主意，但奇怪的是，当我以这种方式更改“layer.data.left”和“layer.data.top”的值时，它不会更新输入字段的值！知道为什么吗？啊哈。。明白了-只需要使用$scope。$apply（）检查我提供的代码笔，您就不需要$scope。$apply（）您确实让我进入了正确的轨道，但是通过选择dom元素来更改输入字段值-感觉不太像角度！相反，我只是通过更改实际数据源来更新数据-

layer.data.top=ui.position.left

。然后使用

$scope.$apply（）