Angularjs get element position

Question

In jQuery we can get position of an object with this:

$(this).position().left;

How can we get the current element position with AngularJS?

Answer 1

You can use prop() from angular jqlite. to select an element you can use querySelector() that returns first matching element or querySelectorAll() that return all matching element

angular.element(document.querySelector('yourelement')).prop('offsetLeft');

or if your "this" is valid dom element

angular.element(this).prop('offsetLeft');

Example for div

you can reference the DOM object with $event in html and pass it to the function on controller

<div ng-click="myfunction($event)"></div>

in controller

$scope.myfunction = function($event){
 console.log(angular.element($event.target).prop('offsetLeft'));

}

Demo

app = angular.module('test',[]);
app.controller('testctrl',function($scope){

  
  $scope.myfunction = function($event){
    console.log($event);
 off =angular.element($event.target).prop('offsetLeft');
  angular.element($event.target).text(off)

}
  
});

.divvy{position:absolute; left:60px;
width:100px; background:red;
}

   

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div  ng-controller="testctrl" ng-app="test">
   <div class="divvy" ng-click="myfunction($event)" >Click to see position</div>
  </div>