Javascript AngularJS:指令更新ng repeat内的父范围
我有一个自定义的拖拽指令内的ng重复的图像。我想在拖动后存储每个图像的x,y偏移。因此,我需要指令来更新图像上的字段Javascript AngularJS:指令更新ng repeat内的父范围,javascript,angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat,Javascript,Angularjs,Angularjs Directive,Angularjs Scope,Angularjs Ng Repeat,我有一个自定义的拖拽指令内的ng重复的图像。我想在拖动后存储每个图像的x,y偏移。因此,我需要指令来更新图像上的字段 return { restrict: 'A', scope: false, link: function(scope, element, attrs){ element.draggable({ containment: "parent", cursor: "crosshair",
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>
但我不想将循环变量名硬编码到指令中
将循环变量名传递给指令的最佳方式是什么?或者理想情况下,将对项值的引用直接传递给指令的最佳方式是什么?在这种情况下,使用隔离作用域并使用双向绑定将当前图像对象传递到指令中是很方便的 所以HTML可以是这样的:
<div ng-repeat="image in images" draggable="image" ng-style="{left:image.left, top:image.top}">
<!-- ... image stuff here ... -->
</div>
这样,您就不再硬编码变量名,并使指令更加可重用。例如,您可以将HTML更改为
ng repeat=“img in images”draggable=“img”
,但指令代码将保持不变。这对我来说不需要摘要
。这个=draggable
正是我想要的,谢谢@PankajParkar在这里不需要摘要,因为您直接修改对象属性,所以可以利用直接对象引用。@dfsq我的想法是stop
is event&我们正在从事件操作范围,那么angular怎么知道我应该触发摘要呢?
<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;
}
});
}
};
});