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

我正在为 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/TmQeL/

解决方法

添加到您的指令：

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

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

Fiddle.

javascript – 拖动后左​​侧和顶部位置的Angularjs指令属性绑定

解决方法

猜你在找的JavaScript相关文章

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