我如何在AngularJS指令x和元素的y位置 [英] 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. I wish to determine if the element object is within the current viewport / if it is available.

目前，我有以下几点：

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坐标为我的特定元素（该指令可以重复很多次）。

I just can't seem to get the x and y positions for my specific element (the directive may be repeated many times).

请注意，我不打算安装或在我的应用程序使用jQuery。

Please note that I do not intend to install or use jQuery in my application.

推荐答案

您可以使用元素[0] .getBoundingClientRect ，它的工作原理 - 有一个例子：

You can use element[0].getBoundingClientRect, it works - there is an example:

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

如果您需要跟踪元素能见度角度指令，但是滚动您还需要处理事件： DOMContentLoaded ，负荷和调整。此外，它会更好地为这些事件只能创建一个处理程序，并停止跟踪元素时指令被销毁

If you need to track element visibility in angular directive, except scroll you also need to handle events: DOMContentLoaded, load and 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);
      })
    }
  };
});

有一个例子：
http://plnkr.co/edit/VkCgBvGnCWZ0JCM8tlaJ

我已经使用这个方法时，他们变得​​可见动态加载图像。

I have used this approach to dynamically load images when they become visible.

这篇关于我如何在AngularJS指令x和元素的y位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！