Question

我试图创建一个可拖动的div并绑定到它的位置，以便我可以在其他地方使用它。我需要多个可拖动的元素。到目前为止，我已经创造了一个可拖动的＆＃39;属性指令，可以根据需要在页面上拖动元素，我用＆＃39; x＆＃39;设置初始位置。并且＆＃39; y＆＃39;属性。

<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＆＃39; x＆＃39;并且＆＃39; y＆＃39;到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;
});

任何建议都会有所帮助。提前谢谢。

Answer 1

<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}}"将起作用

https://jsfiddle.net/1x0bxncp/1/

Answer 2

我认为dragable.scope = {}存在问题。

单向绑定
在属性中使用{{}}括号。在范围内使用x: "@x_loc"
双向绑定
使用范围中没有括号的值。在范围内使用y: "=y_loc"
如果相同，您可以在此处x: "=x_loc"省略名称。像这样x: "="

Answer 3

您需要从范围属性<div dragable x="x_loc" y="y_loc" style="...."></div>

中删除括号

此外，您需要将position:absolute添加到CSS样式

you can see it here

绑定到指令属性

3 个答案: