Javascript 使用带有AngularNG repeat的offsetTop

我使用ng repeat通过将单个字母重复到span元素中来输出段落

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

我的最终目标是能够检测出哪些跨度位于哪条线上，以便对其进行不同的样式设置。

我的想法是使用每个跨距的

offsetTop

值来检测不同的线路。因此，在上面的答案中，我将有三个不同的

偏移
s

我在创建执行此操作的指令（）时遇到了一些问题。发生的事情是，对于应该在同一行中的值，我得到了更多的
offsetTop
s



在这些笔的I'm控制台中记录
top
值，top的数量应该与行的数量相同

这是我第一次（实时）发出指令，所以我想知道我是否只是没有正确地使用
元素

任何方向都会有帮助，谢谢你的帮助
 不使用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);
  }
};

仅使用这个0超时，我就得到了3个不同的顶部值。
在没有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个不同的最大值。
我不确定您是否可以这样做。您可以将数组拆分为对象数组。类似于
vararray=[{line1:['a'，'b']}，{line2:['a'，'b']}]
Nah，没有人能做到这一点。数据实际上来自一个大字符串中的XML文件，它会因实例而异。我不确定您是否能做到这一点。您可以将数组拆分为对象数组。类似于
vararray=[{line1:['a'，'b']}，{line2:['a'，'b']}]
Nah，没有人能做到这一点。数据实际上来自一个大字符串中的XML文件，并且会因实例而异。这很有道理。你太棒了。这很有道理。你太棒了。