AngularJS ng-yineleme ile offsetTop kullanarak

Question

Tekil harfleri bir span öğesine tekrarlayarak paragraf çıktılamak için ng-repeat kullanıyorum.

<p><span>h</span><span>i</span><span> </span><span>M</span><span>s</span></p> 

Bu harflerin içerik süreleri paragrafta birden çok satır olacaktır.

line one of letters 
even more letters here 
and a few more 

Benim nihai hedef farklı tarzı onları amacıyla hangi hat üzerinde hangi açıklıklı tespit edebilmek olmaktır.

Benim düşüncem, farklı çizgileri algılamak için her bir açıklığın offsetTop değerini kullanmaktır. Yani, yukarıdaki cevapta üç farklı offsetTop s olurdu.

Bunu yapmak için bir yönerge oluştururken bazı sorunlarla karşılaşıyorum (based on this question). Neler oluyor, aynı satırda olması gereken değerler için çok daha fazla offsetTop s alıyorum. Bu kalem en In

Just to prove to myself that this could be done, I did it without Angular here.

Here's a Code Pen of me working through this problem in Angular.

Ben konsol top değerini yapıp çizgiler vardır kadar üstleri olmalıdır değilim.

Bu benim ilk (gerçek) bir yönerge oluşturma zamanı, bu yüzden ben element düzgün kullanmıyor olup olmadığını merak ediyorum.

Her yön yardımcı olabilir, yardımınız için teşekkürler!

Answer 1

Angular olmadan nasıl yaptığınız arasındaki büyük bir fark, bu mantığı her şey işlendikten sonra çalıştırıyor olmanızdır, ancak Angular ile yönerge, açıklığın işlendiği anda her bir aralıkta kapalıdır. Bunun en üstte sürekli olarak size farklı değerler verdiğinin görüldüğüne inanıyorum.

Yönergeye bir zamanaşımı eklerseniz, DOM zaman aşımının içindeki işlevi çalıştırmadan önce sunumu tamamlayana kadar bekleyecektir.

myApp.directive('positioner', function($timeout) { 
return { 
    restrict: 'A', 
    link: function($scope, element){ 

    $timeout(function(){ 
     var top = element[0].offsetTop; 
     var height = element[0].offsetHeight; 

     console.log(top); 
    }, 0); 
    } 
}; 

Sıfırın bu zaman aşımını kullanmak bana 3 farklı üst değer verir.