7

我正在为 jqueryui 可拖动编写一个指令，但是在拖动后将左侧和顶部位置绑定到我的范围时遇到了一些麻烦。有人能指出我正确的方向吗？

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 /

4

2 回答 2

5

添加到您的指令：

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() 方法中的指定范围属性。这适用于同一页面上的多个可拖动项。

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

小提琴。

于 2013-01-08T16:17:19.033 回答
0

是初学者普遍面临的问题。

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

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

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

于 2013-01-08T15:41:53.900 回答