Làm cách nào để nhận vị trí x và y của một phần tử trong chỉ thị AngularJS

Question

Trong phần chức năng liên kết của chỉ thị, chúng tôi có quyền truy cập đối tượng element. Tôi muốn xác định xem đối tượng element có nằm trong chế độ xem hiện tại hay không nếu nó có sẵn.

Tôi hiện có như sau:

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! 

       }); 

Tôi chỉ không thể có vẻ để có được x và vị trí y cho yếu tố cụ thể của tôi (chỉ thị có thể được lặp đi lặp lại nhiều lần).

Xin lưu ý rằng tôi không định cài đặt hoặc sử dụng jQuery trong ứng dụng của mình.

Answer 1

Bạn có thể sử dụng element[0].getBoundingClientRect, nó hoạt động - có là một ví dụ:

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

Nếu bạn cần phải theo dõi tầm nhìn phần tử trong chỉ thị góc, trừ scroll bạn cũng cần phải xử lý sự kiện: DOMContentLoaded, load và resize. Ngoài ra nó sẽ được tốt hơn để tạo ra chỉ có một bộ xử lý đối với những sự kiện, và ngừng theo dõi phần tử khi chỉ bị phá hủy

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ó một ví dụ: http://plnkr.co/edit/VkCgBvGnCWZ0JCM8tlaJ

Tôi đã sử dụng phương pháp này để tự động tải hình ảnh khi chúng trở nên hữu hình.