How to get the current position of an element in angularjs

javascript angularjs events dom-manipulation
PRASHANT KUMAR picture PRASHANT KUMAR · Jan 30, 2016 · Viewed 8.6k times · Source

I want to change the user interface on scrolling the page, and for that i want to get the position of div element (top and bottom), how can i do this in angularjs ? In the following code how can i get the top_position?

var w=angular.element($window);

w.bind('scroll', function(){

    var top_div=angular.element($('#top-div'));
    // now here what function should i use ?
    console.log("the top of the div having id top-div:"+**top_position**);

});

Answer

kirill.buga picture kirill.buga · Jan 30, 2016

you can get the DOM element in a link function of your directive and do with it wherever you want

scope: {...},
restrict: 'AE',
controller: function() {},
link: function($scope, elem, attrs) {
   var el = elem[0]; // elem - jQLite element, el - native DOM element
   console.log(el.getBoundingClientRect()); // the bounding rect of the element
}

Related questions

Watch multiple $scope attributes

Is there a way to subscribe to events on multiple objects using $watch E.g. $scope.$watch('item1, item2', function () { });

Read More
AngularJS directives attributes access from the controller

I am trying to access the attributes of a directive in the controller function. However, by the time I access it, it is undefined. I noticed that if I do a simple timer it works. Is there a way to …

Read More
How do I create a custom event in an AngularJs service

I am working on an AngularJs project. I have a service which sets and removes events on some buttons. This service is utilized by another service which I do not want to interact directly with the buttons. However I would …

Read More