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?

Jai · Accepted Answer · 2014-04-08 12:09:16Z

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

answered Apr 8, 2014 at 12:09

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aajahid Over a year ago

You did put me in right track, but changing input field value by selecting dom element - doesn't feel like angular way! Instead I just updated my data by changing actual data source - layer.data.top = ui.position.left. And then use $scope.$apply()

Labib Ismaiel · Accepted Answer · 2014-04-08 12:37:58Z

1

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

edited Apr 8, 2014 at 12:37

answered Apr 8, 2014 at 12:17

Labib Ismaiel

1,3402 gold badges12 silver badges21 bronze badges

3 Comments

Aajahid Over a year ago

That is a good idea but strangely when I change the value of 'layer.data.left' & 'layer.data.top' in this way - it doesn't update the input field value! Any idea why?

Aajahid Over a year ago

Aha.. got it - just needed to use $scope.$apply()

Labib Ismaiel Over a year ago

check the codepen I provided, and you won't need a $scope.$apply()

Aajahid · Accepted Answer · 2014-05-14 18:13:59Z

0

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

answered May 14, 2014 at 18:13

Aajahid

1,6962 gold badges14 silver badges34 bronze badges

Collectives™ on Stack Overflow

Angular - 2 way data binding with DIV element style

3 Answers 3

Updated Codepen

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related