एनजी-दोहराने का उपयोग करते समय तत्व की सही ऊंचाई और ऑफ़सेट मान कैसे प्राप्त करें?

Question

मैं सूची आइटम की ऑफ़सेट और ऊंचाई प्राप्त करने का प्रयास कर रहा हूं। एक बार मेरे पास हो जाने के बाद, मैं एक पैरेंट निर्देश पर एक समारोह बुलाता हूं। अंत में, जब वे देखेंगे तो यह संक्रमण तत्वों में और बाहर हो जाएगा।

समस्या: ng-repeat (क्यों मैं नहीं जानता) की वजह से, el[0].offsetheight और el[0].getBoundingClientRect().top; मूल्यों काफी यादृच्छिक कर रहे हैं; जब तक, मैं तर्क के चारों ओर $timeout लपेटता हूं। मुझे लगता है कि ऐसा इसलिए है क्योंकि शैलियों में प्रस्तुत करने का समय है?

प्रश्न: कैसे मैं एक सटीक ऑफसेट और ऊंचाई प्राप्त कर सकते हैं/एक $timeout लपेटकर या एक $watch का उपयोग कर ओ डब्ल्यू।

HTML:

<dt spyed ng-repeat="exp in experiences"> 
... 
</dt> 

जे एस:

app.directive('spyed', function() { 
    return { 
     require: '^scrollSpyer', 
     link: function(scope, el, attrs, ctrl) { 
      // this value is mostly random after the $first ng-repeat item 
      var offset = el[0].getBoundingClientRect().top; 
      // this value is also mostly randome after the $first ng-repeat item 
      var theHeight = el[0].offsetHeight; 
      // this fires the expMapper on parent directive. 
      ctrl.expMapper(offset, theHeight); 
     } 
    }; 
}); 

क्यों एक द्रष्टा का उपयोग नहीं पर Sidenote: कारण मैं न एक द्रष्टा उपयोग करना चाहते हैं मैं है इन मानों को मूल निर्देश में संग्रह में धक्का देना। मैं उस सरणी को रीसेट करना नहीं चाहता हूं जो मुझे करना होगा यदि यह प्रत्येक 2way बाध्यकारी पर ctrl.expMapper() को फायरिंग रखता है।

जनक निर्देशक:

$scope.getOffsets = function() { 
    //Do your logic here 
}; 

नोट इस छोटा सा फर्क:

<dt spyed ng-repeat="exp in experiences" ng-init="$last ? getOffsets(): ''"> 
    ... 
</dt> 

एनजी-init स्थिति के आधार पर पिछले जाँच करने के लिए

app.directive('scrollSpyer', function ($window, Experiences) { 
    return { 
     controller: function($scope){ 
      $scope.experiences = []; 
      this.expMapper = function(offset, height) { 
       $scope.experiences.push({'offset': offset, 'height': height, 'inView': false}); 
      }; 
     }, 
     link: function(scope) { 
      var i = 0; 
      angular.element($window).bind('scroll', function() { 

       if(i < scope.experiences.length) { 
        if (this.pageYOffset >= scope.experiences[i].offset) { 
         Experiences.status.push(scope.experiences[i]); 
         i++; 
        } else { 
         console.log('middle'); 
        } 
       } 

       scope.$apply(); 
      }); 
     } 
    }; 
}); 

Answer 1

यह $ दायरे में एक समारोह बनाओ इंडेक्स बिना टाइमआउट के हो जाएगा