您可以使用element[0].getBoundingClientRect
,它有效 - 有一个例子:
http://plnkr.co/edit/2eOw3B0MaM2vw3bQuFnf http://plnkr.co/edit/2eOw3B0MaM2vw3bQuFnf
如果您需要跟踪角度指令中的元素可见性,除了scroll
您还需要处理事件:DOMContentLoaded
, load
and resize
。另外,最好只为这些事件创建一个处理程序,并在指令被销毁时停止跟踪元素
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);
})
}
};
});
有一个例子:http://plnkr.co/edit/VkCgBvGnCWZ0JCM8tlaJ http://plnkr.co/edit/VkCgBvGnCWZ0JCM8tlaJ
我使用这种方法在图像可见时动态加载图像。