Come ottenere le posizioni x e y di un elemento in una direttiva AngularJS

Question

All'interno della funzione di collegamento di una direttiva, è possibile accedere all'oggetto element. Desidero determinare se l'oggetto element si trova all'interno della finestra corrente/se è disponibile.

Al momento ho il seguente:

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! 

       }); 

io proprio non riesco a ottenere le posizioni x e y per il mio elemento specifico (la direttiva può essere ripetuta più volte).

Si prega di notare che non intendo installare o utilizzare jQuery nella mia applicazione.

Answer 1

Si può usare element[0].getBoundingClientRect, funziona - v'è un esempio:

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

Se avete bisogno di tenere traccia di elemento visibilità in direttiva angolare, tranne scroll è anche necessario per gestire gli eventi: DOMContentLoaded, load e resize. Inoltre sarebbe meglio creare un solo gestore per quegli eventi, e smettere di elemento di monitoraggio in cui la direttiva è distrutto

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

c'è un esempio: http://plnkr.co/edit/VkCgBvGnCWZ0JCM8tlaJ

Ho usato questo metodo per caricare dinamicamente le immagini quando diventano visibili