如何在angularjs中获取元素的当前位置答案

【问题标题】：How to get the current position of an element in angularjs如何在angularjs中获取元素的当前位置
【发布时间】：2016-05-08 03:25:37
【问题描述】：

我想在滚动页面时更改用户界面，为此我想获取 div 元素的位置（顶部和底部），我该如何在 angularjs 中做到这一点？在下面的代码中，我怎样才能得到 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**);

});

【问题讨论】：

当前代码有什么问题？如果在 angularjs 之前加载了 jQuery，你只需要使用 top_div.offset().top 就可以了
@PankajParkar, "top_div.offset().top" 即使我正在滚动，也会产生相同的值。但是当我滚动时，顶部的值应该会改变。
它是根据文档计算的。你需要相对于窗口计算它吗？
@PankajParkar，我该怎么做，我的意思是我如何计算窗口？
.scrollTop() 将是正确的方法 go，它返回 offset 相对于窗口。

标签： javascript angularjs events dom-manipulation

【解决方案1】：

您可以在指令的链接函数中获取 DOM 元素，并在任何您想要的地方使用它

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
}

【讨论】：

【解决方案2】：

基本上，您可以使用两个选项来获取所需元素的top 位置。

.offset() 会给你元素的位置并且可以提供top & left 位置。但这确实是用document 高度计算的，而不是用视口高度计算的。
.scrollTop() 是一种方法，您可以获得与视口（窗口）相关的高度。我认为这是合适的选择。

除此之外，我建议您将代码移至指令，以便更好地控制该 DOM。

【讨论】：