[英]How do I get the x and y positions of an element in an AngularJS directive
Within the link function part of a directive we have access to the element
object. 在指令的link函数部分中,我们可以访问
element
对象。 I wish to determine if the element
object is within the current viewport / if it is available. 我希望确定
element
对象是否在当前视口中/是否可用。
I currently have the following: 我目前有以下内容:
link: function (scope, element, attrs, controller) {
var page = angular.element(window);
page.bind('scroll', function () {
var windowScroll = page[0].pageYOffset,
windowHeight = page[0].innerHeight;
// elementScroll = element.xpos; - this is undefined?
// elementScroll = element.getBoundingClientRect().top - this does not work... undefined?
// elementScroll = element[0].getBoundingClientRect().top - this does not work... undefined?
// ... logic follows that if elementScroll is between windowScroll & windowScroll + windowHeight it is visible!
});
I just can't seem to get the x and y positions for my specific element (the directive may be repeated many times). 我似乎无法获得我的特定元素的x和y位置(该指令可能会重复多次)。
Please note that I do not intend to install or use jQuery in my application. 请注意,我不打算在我的应用程序中安装或使用jQuery。
You can use element[0].getBoundingClientRect
, it works - there is an example: 你可以使用
element[0].getBoundingClientRect
,它有效 - 有一个例子:
http://plnkr.co/edit/2eOw3B0MaM2vw3bQuFnf http://plnkr.co/edit/2eOw3B0MaM2vw3bQuFnf
If you need to track element visibility in angular directive, except scroll
you also need to handle events: DOMContentLoaded
, load
and resize
. 如果需要跟踪angular指令中的元素可见性,除了
scroll
之外,还需要处理事件: DOMContentLoaded
, load
和resize
。 Also it would be better to create only one handler for those events, and stop tracking element when directive is destroyed 此外,最好只为这些事件创建一个处理程序,并在销毁指令时停止跟踪元素
app.directive('trackVisibility', function(){
function isVisible(el) {
var rect = el.getBoundingClientRect();
var clw = (window.innerWidth || document.documentElement.clientWidth);
var clh = (window.innerHeight || document.documentElement.clientHeight) ;
// checks if element is fully visible
//return (rect.top >= 0 && rect.bottom <= clh) && (rect.left >= 0 && rect.right <= clw);
// checks if part of element is visible
return (rect.left <= clw && 0 <= rect.right && rect.top <= clh && 0 <= rect.bottom);
}
var reg = [];
function register(element, fn) {
reg.push([element, fn]);
}
function deregister(element) {
reg = angular.filter(reg, function (item) {
return item[0] !== element;
});
}
angular.element(window).on('DOMContentLoaded load resize scroll', function () {
angular.forEach(reg, function (item) {
item[1](isVisible(item[0]));
});
});
return {
restrict: 'A',
link: function (scope, element, attrs, controller) {
register(element[0], function(isVisible){
scope.$apply(function(){
scope.isVisible = isVisible;
})
});
scope.$on('$destroy', function(){
deregister(element);
})
}
};
});
there is an example: http://plnkr.co/edit/VkCgBvGnCWZ0JCM8tlaJ 有一个例子: http : //plnkr.co/edit/VkCgBvGnCWZ0JCM8tlaJ
I have used this approach to dynamically load images when they become visible. 我已经使用这种方法在图像变得可见时动态加载图像。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.