मैं AngularJS निर्देश

Question

में किसी तत्व के x और y पदों को कैसे प्राप्त करूं, निर्देश के लिंक फ़ंक्शन भाग के भीतर हमारे पास 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 उपयोग कर सकते हैं, यह काम करता है - एक उदाहरण है:

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

आप कोणीय निर्देश में तत्व का उपयोग करती नज़र रखने के लिए, scroll को छोड़कर की जरूरत है आप भी घटनाओं को संभालने की जरूरत है: 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); 
     }) 
    } 
    }; 
}); 

वहाँ

नष्ट हो जाता है पर नज़र रखने के तत्व को रोकने के लिए होगा एक उदाहरण है वे दिखाई देते हैं।