绑定到指令属性

我试图创建一个可拖动的div并绑定到它的位置，以便我可以在其他地方使用该位置。我需要多个可拖动的元素。到目前为止，我已经创建了一个“dragable”属性指令，并且可以根据需要在页面周围拖动元素，我使用'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>

问题是，当我尝试添加绑定“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; 
});

任何建议都会有帮助。提前致谢。而不是

来源

2015-11-11 RoboDave

如果你正在做一个2路中的括号去掉绑定在你的指令中，那么你不应该在你的属性中使用表达式。只要'

'就可以了。 – user2718281

<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/

来源

2015-11-12 01:21:20

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

一种方式属性绑定
使用{{}}支架。在范围内使用x: "@x_loc"
双向绑定
使用从范围值，没有括号。在范围内使用y: "=y_loc"
您可以在这里省略x: "=x_loc"如果他们相同。像这样x: "="

来源

2015-11-12 01:21:47 fastec

你需要从作用域属性<div dragable x="x_loc" y="y_loc" style="...."></div>

还需要添加position:absolute到你的CSS样式

you can see it here

来源

2015-11-12 02:48:51

绑定到指令属性

回答

相关问题