javascript - 使用 ng-repeat 拖动后，Angularjs 指令属性绑定(bind)左/顶部位置

Question

我是 Angular 的新手，一直在尝试创建一个指令，该指令将在元素被用户拖动后将其位置绑定(bind)到模型。我发现了另一个 Stack Overflow 问题，它针对一个简单的对象解决了这个问题:

Angularjs directive attribute binding of left and top position after dragging

myApp.directive('draggable', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.draggable({
                cursor: "move",
                stop: function (event, ui) {
                    scope[attrs.xpos] = ui.position.left;
                    scope[attrs.ypos] = ui.position.top;
                    scope.$apply();
                }
            });
        }
    };
});

请在此处查看 Fiddle 解决方案:http://jsfiddle.net/mrajcok/5Mzda/

现在，我正试图让它与更复杂的对象和 ng-repeat 一起工作，但似乎无法弄清楚为什么它不起作用。

这是我的 HTML:

<div ng-controller="MyCtrl">
  <div ng-repeat="position in positions">
      <input type="number" ng-model="position.divleft"/>
      <input type="number" ng-model="position.divtop"/>
      <p draggable class="example" ng-style="{left: position.divleft, top: position.divtop}" xpos="position.divleft" ypos="position.divtop">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

这是 JS:

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.positions = [
      {"divtop": 80,
       "divleft": 200
      },
      {"divtop": 100,
       "divleft": 250
      }
  ];
};

myApp.directive('draggable', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.draggable({
                cursor: "move",
                stop: function (event, ui) {
                    scope[attrs.xpos] = ui.position.left;
                    scope[attrs.ypos] = ui.position.top;
                    scope.$apply();
                }
            });
        }
    };
});

这是 fiddle :

http://jsfiddle.net/5Mzda/19/

我似乎看不出代码有什么问题。非常感谢任何帮助!

更新

我更仔细地阅读了原始问题中的评论，看起来使用 $eval 有效:

myApp.directive('draggable', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.draggable({
                cursor: "move",
                stop: function (event, ui) {
                    scope.$eval(attrs.xpos + '=' + ui.position.left);
                    scope.$eval(attrs.ypos + '=' + ui.position.top);
                    scope.$apply();
                }
            });
        }
    };
});

不确定是否有更优雅的方法来执行此操作，但现在看来绑定(bind)工作正常!

Answer 1

这看起来不错。

您需要在 Angular 框架中执行所有 Angular 相关的表达式。对于从事件处理程序外部调用的 dom 事件处理程序和方法，您需要使用 $apply 在 Angular 中执行它们, 它将执行表达式然后调用 $digest这反过来又会调用附加的 watch 。

您唯一需要做的改变就是将语句移到 $apply()

scope.$apply(function(){
    scope.$eval(attrs.xpos + '=' + ui.position.left);
    scope.$eval(attrs.ypos + '=' + ui.position.top);
});

演示:Fiddle