使用的offsetTop與AngularJS NG-重複

我使用NG-重複地輸出經重複單個字母爲span元素一個段落。使用的offsetTop與AngularJS NG-重複

<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值來檢測不同的行。所以，在上面的答案中，我會有三個不同的offsetTop s。

創造一個指令，要做到這一點（based on this question）時，我遇到了一些問題。發生了什麼，我得到更多的offsetTop s應該在同一行中的值。

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.

在這些筆的我控制檯記錄top值和有線條應該有儘可能多的上衣。

這是我第一次（real）製作指令的時間，所以我想知道我是不是正確使用element。

任何方向將是有益的，感謝您的幫助！

來源

2016-03-30 theaemarie

我不確定你能做到這一點。你可以將你的數組分成對象數組。就像'var array = [{line1：['a'，'b']}，{line2：['a'，'b']}]' –

不，不能做那個。數據實際上來自一個大字符串中的XML文件，並且它會因實例而異。 – theaemarie

你是如何做的無角之間的一個很大的區別是，你正在運行的邏輯一切都渲染後，但隨着角度的指令發射了每個跨度跨越獲取呈現的那一刻。我相信這就是爲什麼你看到頂部不斷給你不同的價值。

如果添加超時該指令將等到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個不同的最高值。

來源

2016-03-30 20:32:27 TDDdev

Ahhhhhhhhhh。這很有道理。你搖滾。 – theaemarie

使用的offsetTop與AngularJS NG-重複

回答

相關問題