Angular - 使用 DIV 元素样式的 2 路数据绑定答案

【问题标题】：Angular - 2 way data binding with DIV element styleAngular - 使用 DIV 元素样式的 2 路数据绑定
【发布时间】：2014-04-08 11:49:35
【问题描述】：

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

这是密码笔 - http://codepen.io/anon/pen/qmuvH/

在代码笔中 - 你会看到一个带有文本的框 - “大家好”（div#layer）。我确实用 angular 绑定了它的样式 -

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

并在相同的 layer.data.top 和 layer.data.left 中添加了两个同样具有 ng-model 的输入字段；因此，当您更改输入字段中的值时 - 它会移动 div 元素。到目前为止，这很好用。

但我还使用 angular 指令中的 jqueryUI 使“大家好”的 div 可拖动。所以你可以拖动那个元素。

我现在想要的是 - 如果我拖动“大家好” div 元素 - 它也会更新 layer.data.left 和 layer.data.top . 所以这也会改变输入字段中的值。我该怎么做？

【问题讨论】：

标签： javascript jquery angularjs jquery-ui 2-way-object-databinding

【解决方案1】：

你可以试试这样的：

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

为两个输入分配特定的 ID，然后在您的 drag 函数中执行此操作：

drag: function( event, ui ) {
   console.log(event);
   $('#top').val($(this).position().top);
   $('#left').val($(this).position().left);
}

Updated Codepen

【讨论】：

你确实让我走上了正轨，但是通过选择 dom 元素来更改输入字段值 - 感觉不像是有角度的方式！相反，我只是通过更改实际数据源来更新我的数据 - layer.data.top = ui.position.left。然后使用$scope.$apply()

【解决方案2】：

您可以在图层 div 上为mouseup 添加一个事件监听器，它会调用一个相应地更改图层数据的函数，所以它会是：

1- 在你的控制器内部定义一个这样的函数：

$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(layer)" 添加到您的图层 div

这是更新后的codepen

【讨论】：

这是个好主意，但奇怪的是，当我以这种方式更改 'layer.data.left' 和 'layer.data.top' 的值时 - 它不会更新输入字段值！知道为什么吗？
啊哈.. 明白了——只需要使用 $scope.$apply()
检查我提供的codepen，你不需要$scope.$apply()

【解决方案3】：

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

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

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

这是更新后的代码笔 - http://codepen.io/anon/pen/wgzme

【讨论】：