Angularjs指令属性后拖动左边和顶部位置的结合 [英] Angularjs directive attribute binding of left and top position after dragging

问题描述

我写了jQueryUI的可拖动的指令，但我有一些麻烦在拖动后绑定到我的范围左边和顶部位置。
可能有人点我在正确的方向？

I'm writing a directive for jqueryui draggable, but I'm having some trouble getting the left and top position to bind to my scope after dragging. Could someone point me in the right direction?

myApp.directive('draggable', function () {
return {
    restrict: 'A',
    link: function (scope, element, attrs) {
        element.draggable({
            cursor: "move",
            stop: function (event, ui) {
                attrs.$set('xpos', ui.position.left);
            }
        });
    }
};
});

这里是什么我试图做一个小提琴： http://jsfiddle.net/psinke/TmQ​​eL /

推荐答案

添加到您的指令：

scope: { xpos: '=', ypos: '=' },

在'='的语法设置您的分离范围和父范围之间的双向数据绑定。您对这些的任何更改您的指令隔离作用域属性也会影响到父范围过于，反之亦然。

The '=' syntax sets up two-way databinding between your isolate scope and the parent scope. Any changes you make to these isolate scope properties in your directive also affect the parent scope too, and vice versa.

然后在链接功能：

stop: function (event, ui) {
  scope.xpos = ui.position.left;
  scope.ypos = ui.position.top;
  scope.$apply();
  scope.$apply();
}

有在角，你必须调用$适用（）两次，如​​果你设置与约束=一个隔离scope属性的属性当前的错误。
请参见 https://github.com/angular/angular.js/issues/1276

There is a currently a bug in Angular where you have to call $apply() twice if you're setting an attribute on an isolate scope property bound with =. See https://github.com/angular/angular.js/issues/1276

更新： @Peter在评论中指出，上述中断通过输入文本框移动拖动。我无法得到它与分离范围工作，所以我只是有指令使用父作用域（即指令不创建一个新的范围内）。我用ATTRS修改了stop（）方法，在规定范围属性。这适用于在同一网页上的多个拖拽元素

Update: @Peter noted in the comments that the above breaks moving the draggable via the input textboxes. I was unable to get it to work with an isolate scope, so I just had the directive use the parent scope (i.e., the directive does not create a new scope). I used attrs to modify the specified scope attribute in the stop() method. This works with multiple draggables on the same page.

stop: function (event, ui) {
   scope[attrs.xpos] = ui.position.left;
   scope[attrs.ypos] = ui.position.top;
   scope.$apply();
}

小提琴。

这篇关于Angularjs指令属性后拖动左边和顶部位置的结合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！