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"，但指令代码将保持不变。

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

1 个答案: