AngularJS：指令更新ng-repeat内的父范围

Question

我在图像的ng-repeat中有一个自定义可拖动指令。 我想在拖动每个图像后存储x，y偏移量。 因此，我需要指令来更新图像上的字段。

return {
    restrict: 'A',
    scope: false,
    link: function(scope, element, attrs){
        element.draggable({
            containment: "parent",
            cursor: "crosshair",
            stop: function(ev, ui) {
              scope.left=ui.helper[0].style.left;
              scope.top=ui.helper[0].style.top;
          }
       });
     }
  };

  <div ng-repeat="image in images" 
       draggable
       ng-style="{left:image.left,
                 top:image.top}">... image stuff here ...</div>

不幸的是，这不起作用，因为当ng-repeat为每个图像项创建子范围时，它

创建一个新的作用域，它原型继承自父作用域，但它也将该项的值赋给子作用域的新属性。 （新属性的名称是循环变量的名称。）（ https://github.com/angular/angular.js/wiki/Understanding-Scopes#ng-repeat ）

我可以通过更改引用来使用循环变量名来使指令工作，因为我想要它：

scope.image.left=ui.helper[0].style.left;
scope.image.top=ui.helper[0].style.top;

但我不想将循环变量名称硬编码到指令中。

将循环变量名称传递给指令或理想情况下，将项目值的引用直接传递给指令的最佳方法是什么？

Answer 1

在这种情况下，使用隔离范围并使用双向绑定将当前图像对象传递给指令是很方便的。

所以HTML可以是这样的：

<div ng-repeat="image in images" draggable="image" ng-style="{left:image.left, top:image.top}">
    <!-- ... image stuff here ... -->
</div>

和指令然后：

.directive('draggable', function () {
    return {
        scope: {image: '=draggable'},
        link: function (scope, element, attrs) {
            element.draggable({
                containment: "parent",
                cursor: "crosshair",
                stop: function (ev, ui) {
                    scope.image.left = ui.helper[0].style.left;
                    scope.image.top = ui.helper[0].style.top;
                }
            });
        }
    };
});

这样您就不再对变量名称进行硬编码，并使指令更具可重用性。 例如，您可以将HTML更改为ng-repeat="img in images" draggable="img"但指令代码将保持不变。