AngularJS ng-repeatでoffsetTopを使用する

Question

個々の文字をスパン要素に繰り返して段落を出力するには、ng-repeatを使用しています。

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

これらの文字の範囲は、段落の複数の行になります。

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

私の最終目標は、異なった彼らのスタイルをするために、どのライン上であるスパンを検出することができることです。

私は、それぞれのスパンの値をoffsetTopとし、異なる行を検出することを考えました。したがって、上記の答えでは、私は3つの異なるoffsetTopを持っています。

これを行う指示文を作成するときにいくつか問題が発生しています（based on this question）。何が起こっているのですか、私は同じ行にあるべき値のためにさらにoffsetTopを取得していますか？これらのペンの私は、コンソールtop値をログに記録することだし、行数と同数のトップスがあるはずで

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

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

。

これは私の最初の（実際の）時間の指示なので、私はちょうどelementを正しく使用していないのだろうかと思っています。

お手数をおかけしていただきありがとうございます。

Answer 1

Angularを使用しない方法の大きな違いは、すべてがレンダリングされた後でロジックを実行していることです。ただし、Angularディレクティブはスパンがレンダリングされる瞬間に各スパンで発生します。私はこれが、トップが絶えず異なる価値を与えているのを見ている理由だと思います。

ディレクティブにタイムアウトを追加すると、タイムアウト内で関数を実行する前にDOMがレンダリングを完了するまで待機します。

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); 
    } 
}; 

このタイムアウト値を使用すると、3つの明確なトップ値が得られます。