CODEWITHSUNDEEP
javascriptangularjs
Dennis
Dennis

Reputation: 368

Change top and left property based on offSet

Well what I want to achieve is that my top and left property on a div get updated every time I click on a element in the page the Div get updated with the properties where the mouse was.

Right now I have no idea why this doesn't work.

I simple a have a big div with alot of elementes repeated with the a ng click function in it. 

ng-click="mapCurrentPerson($event)"

I have in my controller this functions, where I log the offset of the $event bind it to a variable and try to update the variable in the page using the ng-style property

        $scope.currentX = 0;
        $scope.currentY = 0;

        $scope.mapCurrentPerson = function(event) {

            var x = event.offsetX;
            var y = event.offsetY;

            console.log('x: ' + x + ', y: ' + y);

            $scope.$watch('currentX', function(newValue, oldValue) {
                console.log(newValue, oldValue);
                $scope.currentX = '' + x + 'px';
            });

            $scope.$watch('currentY', function(newValue, oldValue) {
                console.log(newValue, oldValue);
                $scope.currentY = '' + y + 'px';
            });

        }

And my html where the div needs to get updated based on the click properties

<div class="current-person"
         ng-style="{'top': currentX,
                    'left':currentY}">
        <!--<img src="{{ current.photo }}" class="current-photo">-->
    </div>

The start of the $scope.currentX and Y are just working great on the NG style but it doesn't get updated when I change the scope properties no matter what I try

Upvotes: 3

Views: 102

Answers (1)

Olga Akhmetova
Olga Akhmetova

Reputation: 490

Try using 

$scope.coordinates={};
$scope.coordinates.currentX=0;
$scope.coordinate.currentY=0;

Upvotes: 1

Related Questions