我正在尝试创建一个可拖动的 div 并绑定(bind)到它的位置，以便我可以在其他地方使用它。我需要多个可拖动元素。到目前为止，我已经创建了一个“可拖动”属性指令，并且可以根据需要在页面周围拖动元素，我使用“x”和“y”属性设置初始位置。
<body ng-app="myApp" ng-controller="myCtrl">
<div dragable x="50" y="50" style="...."></div>
<p>
x: {{x_loc}}<br/>
y: {{y_loc}}
</p>
<body>
问题是当我尝试将绑定(bind)“x”和“y”添加到 myCtrl 范围中的变量时
<div dragable x="{{x_loc}}" y="{{y_loc}}" style="...."></div>
这会产生一般无效表达式错误。我的指令如下所示:
app.directive("dragable", function($document) {
dragable = {};
dragable.restrict = 'A',
dragable.link = function(scope, element, attrs) {
element.css({
top: scope.y + 'px',
left: scope.x + 'px'
});
function select(evt) {
... // get initial conditions
$document.on('mousemove',move);
$document.on('mouseup',deselect);
};
function move(evt){
... //do some error checking then
//update the element location
};
function deselect(evt){
$document.unbind('mousemove',move);
$document.unbind('mouseup',deselect);
};
$document.on('mousedown', select);
};
dragable.scope = {
x: "=",
y: "=",
};
return dragable;
});
任何建议都会有帮助。提前致谢。
最佳答案
<div dragable x="x_loc" y="y_loc" style="...."></div>
而不是
<div dragable x="{{x_loc}}" y="{{y_loc}}" style="...."></div>
因为
dragable.scope = {
x: "=",
y: "=",
};
如果您使用x: "@" x="{{x_loc}}" 就可以了
关于javascript - 绑定(bind)到指令属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33662121/