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

All’interno della funzione di collegamento parte di una direttiva che abbiamo accesso al element oggetto. Mi auguro per determinare se il element oggetto è all’interno della finestra corrente /se è disponibile.

Io attualmente sono i seguenti:

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 specifico elemento (la direttiva può essere ripetuto molte volte).

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

  • Se si includono jquery, l’elemento sarà un jquery elemento che è possibile utilizzare .offset() per ottenere le posizioni x e y.
  • No jQuery – ho dimenticato di dire che!
  • Allora, la vaniglia-js maestri aiutarci…
  • Si prega di vedere l’aggiornamento, ho usato getBoundingClientRect (), ma senza successo

 

One Reply
  1. 17

    È possibile utilizzare element[0].getBoundingClientRect, funziona – c’è un esempio:

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

    Se avete bisogno di tenere traccia elemento di visibilità angolare direttiva, ad eccezione di scroll che è necessario gestire gli eventi: DOMContentLoaded, load e resize. Inoltre sarebbe meglio creare un unico gestore per quegli eventi, e interrompere elemento di tracciamento quando 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 approccio per caricare dinamicamente le immagini quando diventano visibili.

Lascia un commento