Ka Tech Ka Tech - 1 year ago 146
jQuery Question

AngularJS - How to get offset of top and left position of an element in document

looking for guru help,
I'm using angularJS in a repeating list in the code below. How would I get the the absoulute position or relative to the document of the top and left offset position for 'div class="section"' and print it in the console?
Is it it possible with AngularJs or do I need to use Jquery?

Ultimately my goal is get the offset positions and use it to position a modal window, but if I could get help on the above I should be able to figure the rest out.

My code is below and thanks in advance:


<body ng-controller="MyMgtCtrl">
<div class="container-fluid" >
<div class="section">{{gapSection.headerID}}.{{gapSection.sectionID}}</div>
<label ng-click="showMenu()" class="label label-primary">Toggle</label>
</div><!-- /.container -->


Angular Controller

var myMgtApp = angular.module("myMgtApp");

var data={
gapSection:[{headerID:1,sectionID:1,requirement:"SOME DATA 1"},
{headerID:2,sectionID:1,requirement:"SOME DATA"},
{headerID:2,sectionID:2,requirement:"SOME DATA 3"}]

$scope.data = data;
$scope.gapSection = data.gapSection;


Answer Source

Inside ng-click, you get an $event object you can pass to your method.

<label ng-click="showMenu($event)" class="label label-primary">Toggle</label>

The event has two properties pageX and pageY, which may be what you want.

    var x = passedEventObject.pageX;
    var y = passedEventObject.pageY;

Check the "Arguments" section of the ng-clickdocumentation.

Then click through to the $event page, which says

The object is an instance of a jQuery Event Object when jQuery is present or a similar jqLite object. Once you get this, Angular role is over and it's a jQuery / DOM question.

(highlight mine)

The jQuery Event Object shows the two properties.


This will give you X and Y of the mouse, which is pretty relevant for your use case of modal positioning on click as, however, to be more accurate, you can try other things:

var position = $event.target.getBoundingClientRect();
var x = position.left;
var y = position.top;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download