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

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

Fiddle。

Answer 2

这是初学者面临的常见问题。

添加以下代码。它会起作用。

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

原因：每当jquery世界发生变化时，应通过调用$ scope。$ apply（）将其传达给AngularJS世界。

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

2 个答案: