Angularjs获得元素位置

时间:2014-12-20 14:41:52

标签: javascript jquery angularjs

在jQuery中,我们可以用这个来获取对象的位置:

$(this).position().left;

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

1 个答案:

答案 0 :(得分:34)

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

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

或者你的“this”是有效的dom元素

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

div的示例

您可以在html中使用$ event引用DOM对象,并将其传递给控制器​​上的函数

<div ng-click="myfunction($event)"></div>
控制器中的

$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>