javascript - Angularjs directive attribute binding of left and top position after dragging - Stack Overflow

admin管理员组

文章数量:1390248

I'm writing a directive for jqueryui draggable, but I'm having some trouble getting the left and top position to bind to my scope after dragging. Could someone point me in the right direction?

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

Here's a fiddle of what I'm trying to do: /

I'm writing a directive for jqueryui draggable, but I'm having some trouble getting the left and top position to bind to my scope after dragging. Could someone point me in the right direction?

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

Here's a fiddle of what I'm trying to do: http://jsfiddle/psinke/TmQeL/

• javascript
• angularjs

Share Improve this question Follow asked Jan 8, 2013 at 14:19 Peter SinkePeter Sinke 30711 gold badge33 silver badges77 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Add to your directive:

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

The '=' syntax sets up two-way databinding between your isolate scope and the parent scope. Any changes you make to these isolate scope properties in your directive also affect the parent scope too, and vice versa.

Then in the linking function:

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

There is a currently a bug in Angular where you have to call $apply() twice if you're setting an attribute on an isolate scope property bound with =. See https://github./angular/angular.js/issues/1276

Update: @Peter noted in the ments that the above breaks moving the draggable via the input textboxes. I was unable to get it to work with an isolate scope, so I just had the directive use the parent scope (i.e., the directive does not create a new scope). I used attrs to modify the specified scope attribute in the stop() method. This works with multiple draggables on the same page.

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

Fiddle.

It is a mon problem faced by beginners.

Add the following code. it will work.

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

Reason: Whenever change happens in the jquery world, it should be municated to AngularJS world by calling $scope.$apply().

本文标签： javascriptAngularjs directive attribute binding of left and top position after draggingStack Overflow