Angularjs có được vị trí nguyên tố

Question

Trong jQuery chúng ta có thể có được vị trí của một đối tượng với điều này:

$(this).position().left; 

Làm thế nào chúng ta có thể có được vị trí yếu tố hiện tại với AngularJS?

Answer 1

Bạn có thể sử dụng lệnh prop() từ jqlite góc. để chọn một yếu tố bạn có thể sử dụng querySelector() trả về phù hợp đầu tiên yếu tố hoặc querySelectorAll() mà trả lại tất cả các yếu tố phù hợp

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

hoặc nếu bạn "này" là yếu tố dom hợp lệ

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

Ví dụ cho div

bạn có thể tham chiếu đối tượng DOM với $ event in html và chuyển nó tới hàm trên bộ điều khiển

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

trong điều khiển

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