javascript - Angularjs 获取元素位置

Question

在 jQuery 中，我们可以通过以下方式获取对象的位置:

$(this).position().left;

我们如何使用 AngularJS 获取当前元素位置？

Answer 1

您可以使用 Angular jqlite 中的 prop()。要选择一个元素，您可以使用返回第一个匹配元素的 querySelector() 或返回所有匹配元素的 querySelectorAll()

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

或者如果您的“this”是有效的 dom 元素

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

div 示例

你可以在 html 中用 $event 引用 DOM 对象并将其传递给 Controller ​​上的函数

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

在 Controller 中

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

}

演示

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>