javascript - 拖动后左侧和顶部位置的Angularjs指令属性绑定(bind)

Question

我正在为 jqueryui draggable 编写一个指令，但是我在拖动后无​​法将左侧和顶部位置绑定(bind)到我的范围。有人能指出我正确的方向吗？

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);
            }
        });
    }
};
});

这是我正在尝试做的事情的 fiddle :http://jsfiddle.net/psinke/TmQeL/

Answer 1

添加到您的指令:

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

“=”语法在您的隔离作用域和父作用域之间建立双向数据绑定(bind)。您在指令中对这些隔离范围属性所做的任何更改也会影响父范围，反之亦然。

然后在链接函数中:

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

Angular 中目前存在一个错误，如果您在使用 = 绑定(bind)的隔离范围属性上设置属性，则必须调用 $apply() 两次。参见 https://github.com/angular/angular.js/issues/1276

更新:@Peter 在评论中指出，上述内容中断了通过输入文本框移动可拖动对象。我无法让它与隔离作用域一起工作，所以我只是让指令使用父作用域(即指令不创建新作用域)。我在 stop() 方法中使用 attrs 修改了指定的范围属性。这适用于同一页面上的多个可拖动对象。

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

Fiddle .