AngularJS 지시문에서 요소의 x 및 y 위치를 얻는 방법

Question

지시문의 링크 함수 부분 내에서 element 객체에 액세스 할 수 있습니다. element 개체가 현재 뷰포트 내에 있는지/사용할 수 있는지 확인하고 싶습니다.

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! 

       }); 

난 그냥 (지시어가 여러 번 반복 될 수 있음) 내 특정 요소에 대한 x와 y 위치를 얻이 수없는 것 :

나는 현재 다음있다.

제 응용 프로그램에 jQuery를 설치하거나 사용하지 않으려합니다.

Answer 1

당신은 element[0].getBoundingClientRect을 사용할 수 있습니다, 그것은 작동합니다 - 예를 들어 있습니다 : 당신이 scroll를 제외하고, 각 지시어에 요소의 가시성을 추적해야하는 경우

http://plnkr.co/edit/2eOw3B0MaM2vw3bQuFnf

당신은 또한 이벤트 처리해야합니다 DOMContentLoaded, load을하고 resize. http://plnkr.co/edit/VkCgBvGnCWZ0JCM8tlaJ

나는 동적으로 할 때 이미지를로드하기 위해이 방법을 사용하고 있습니다 : 또한 해당 이벤트에 대해 하나의 핸들러를 생성하고, 지시가

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); 
     }) 
    } 
    }; 
}); 

이

을 파괴 할 때 요소를 추적 중지 나을 것이 한 예이다 그들은 보이게된다.