拖动后,Angularjs指令属性绑定左侧和顶部位置

Question

我正在为jqueryui draggable编写一个指令,但是我在拖动后让左上角位置绑定到我的作用域时遇到了一些麻烦.有人能指出我正确的方向吗？

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/

Answer 1

添加到您的指令:

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

'='语法在隔离范围和父范围之间设置双向数据绑定.您对指令中的这些隔离范围属性所做的任何更改也会影响父范围,反之亦然.

然后在链接功能:

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

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

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

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

小提琴.