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

jquery css angularjs

12,968

Solution 1

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.

$scope.showMenu=function(passedEventObject){
    var x = passedEventObject.pageX;
    var y = passedEventObject.pageY;
    data.showMenu=!data.showMenu;
};

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.

Update:

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;

Solution 2

var position = $event.target.getBoundingClientRect();

var x = position.left; var y = position.top;

$scope.showMenu = function(passedEventObject){
    var position = passedEventObject.target.getBoundingClientRect();
    var passedEventObjectx = position.left;
    var passedEventObjecty = position.top;
    console.log(passedEventObjectx+"=="+passedEventObjecty);
};

12,968

Author by

Ka Tech

Updated on June 06, 2022

Comments

Ka Tech almost 2 years

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:

HTML

<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 -->
</body>

Angular Controller

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

myMgtApp.controller("MyMgtCtrl",function($scope){
    var data={
        showMenu:false,
        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;
    $scope.showMenu=function($scope){
        data.showMenu=!data.showMenu;
    };
});