javascript 使用 ng-repeat 拖动后，Angularjs 指令属性绑定左/上位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15470666/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angularjs directive attribute binding left/top positions after dragging with ng-repeat
提问by Chanpory
I am new to Angular and have been trying to create a directive which will bind the position on an element to a model—after it has been dragged by the user. I found another Stack Overflow question which solves this for a simple object:
我是 Angular 的新手，一直在尝试创建一个指令，该指令将在用户拖动元素后将元素上的位置绑定到模型。我发现了另一个 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();
}
});
}
};
});
See Fiddle solution here: http://jsfiddle.net/mrajcok/5Mzda/
请参阅此处的小提琴解决方案：http: //jsfiddle.net/mrajcok/5Mzda/
Now, I am now trying to get this to work with a more complex object and with ng-repeat, but can't seem to figure out why it's not working.
现在，我现在试图ng-repeat让它与更复杂的对象和 一起工作，但似乎无法弄清楚为什么它不起作用。
Here is my HTML:
这是我的 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>
And here is the JS:
这是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();
}
});
}
};
});
Here is the Fiddle:
这是小提琴：
I can't seem to see what's wrong with the code. Would appreciate any help!
我似乎看不出代码有什么问题。将不胜感激任何帮助！
UPDATE
更新
I read the comments more closely in original question, and it looks like using $evalworks:
我在原始问题中更仔细地阅读了评论，看起来像使用$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();
}
});
}
};
});
Not sure if there's a more elegant way to do this, but it appears the binding is working properly now!
不确定是否有更优雅的方法来做到这一点，但现在绑定似乎工作正常！
采纳答案by Arun P Johny
This looks fine.
这看起来不错。
You need execute all angular related expressions with in the angular framework. In case of dom event handlers and methods which are called from outside the event handlers, you need to execute them with in the angular using $apply, which will execute the expression and then call $digestwhich in turn will call the attached watches.
您需要在 angular 框架中执行所有与 angular 相关的表达式。对于从事件处理程序外部调用的 dom 事件处理程序和方法，您需要使用$apply以角度执行它们，这将执行表达式，然后调用$digest依次调用附加的手表。
The only change you have to make is to move the statements inside $apply()
您唯一要做的更改是将语句移到里面 $apply()
scope.$apply(function(){
scope.$eval(attrs.xpos + '=' + ui.position.left);
scope.$eval(attrs.ypos + '=' + ui.position.top);
});
Demo: Fiddle
演示：小提琴
