Angular - 2 way data binding with DIV element style

Question

I'm building a dragging interface using Angular and jQueryUI. The reason I want to use Angular is, I wanted angularJS 2 way data binding which is really awesome!

Here is the codepen - http://codepen.io/anon/pen/qmuvH/

In the codepen - you will see there is box with text - "hello everyone" (div#layer). I did bind its style with angular -

top:{{layer.data.top}}px;left: {{layer.data.left}}px

And added two input fields which also have ng-model to that same layer.data.top and layer.data.left; So when you change the value in the input field - it will move the div element. So far this works great.

But I also made that "hello everyone" div draggable using jqueryUI in angular directive. So you can drag that element around.

What I want now is - If I drag around the "hello everyone" div element - it will also update layer.data.left and layer.data.top. So this will also change the value in the input field. How can I do that?

Answer 1

With the help of 2 answers, I ended up using following update -

I just updated my code in drag event function -

drag: function( event, ui ) 
{
    scope.layer.data.left = ui.position.left;
    scope.layer.data.top = ui.position.top;
    scope.$apply();
}

Here is the updated codepen - http://codepen.io/anon/pen/wgzme

Answer 2

You can try something like this:

Top : <input id='top' type="text" ng-model="layer.data.top">
Left : <input id='left' type="text" ng-model="layer.data.left"> 

assign specific ids to both inputs, then do this in your drag function:

drag: function( event, ui ) {
   console.log(event);
   $('#top').val($(this).position().top);
   $('#left').val($(this).position().left);
}

Updated Codepen

Answer 3

you can add an event listener for mouseup on the layer div, it calls a function that changes the layer data accordingly, so it will be:

1- inside your controller define a function like this:

$scope.getInfo = function (layer) {
  var el = document.getElementById('layer');
  layer.data.left = parseInt(el.style["left"]);
  layer.data.top = parseInt(el.style["top"]);
}

2- add ng-mouseup="getInfo(layer)" to your layer div

here's an updated codepen