javascript - 在 AngularJS 中相对于其他元素动态转换元素

Question

我试图在 HTML/CSS 中获得以下内容(基本上是对 Angular 线“连接” Angular 落的方 block ):

 ___________________
| |     /|    1    |
| |    / |_________|
| |   / /|    2    |
| |  / / |_________|
| | / / /|    3    |
| |/_/_/_|_________|
| |1|2|3_|_________|
|_|1|2|3_|_________|

现在我正在使用 div 并使用自定义 Angular 指令转换它们(我在其中传递它试图附加到的元素)，但我想知道是否有更简单的方法来表示它？对我来说，它看起来非常像 JQuery，而且由于我是 Angular 的新手，所以我想尝试远离它。

此外，我希望它是动态的，以防我想在两侧添加更多框，或者如果我想调整框的大小或添加其他内容，那么静态 CSS 就不行了。

这是我目前的尝试:http://plnkr.co/edit/XqwpRKlVqfVlwnA8KZ0f?p=preview (另外，由于某种原因，我的侧标签似乎没有在中心对齐，不知道为什么......)

谢谢!

Answer 1

我将指令更改为以下内容: http://plnkr.co/edit/xyOBA6iCx4BPqjqBlPYN?p=preview

我从 s 中删除了 ids 并将它们放在第一个:

<td id="row-1">1</td>
</tr>
<tr><td id="row-2">2</td></tr>
<tr><td id="row-3">3</td></tr>

我还在第一行添加了一个 id:

<td id="col-1" width="34px">1</td>
<td id="col-2" width="34px">2</td>
<td id="col-3" width="34px">3</td>

该指令现在是“画线”，它基本上使用数学来确定长度:

var from_elem = angular.element( document.querySelector( '#' + attrs.from ) );
var to_elem = angular.element( document.querySelector( '#' + attrs.to ) );
var height_distance = from_elem[0].getBoundingClientRect().top-to_elem[0].getBoundingClientRect().top;
var width_distance = from_elem[0].getBoundingClientRect().left-to_elem[0].getBoundingClientRect().left;
var distance = Math.sqrt(
                Math.pow(height_distance,2)+
                Math.pow(width_distance,2)
);
var angle = Math.atan(height_distance/width_distance);
var my_current_border = element[0].getBoundingClientRect().width;
var required_padding = (distance - my_current_border)/2;
element.css({
    'top':to_elem[0].getBoundingClientRect().top + 'px',
    'left':to_elem[0].getBoundingClientRect().left + 'px',
    'border-top': '1px solid',
    'position': 'absolute',
    'padding-left': required_padding + 'px',
    'padding-right': required_padding + 'px',
    'transform': 'rotate(' + angle + 'rad)',
    'transform-origin': 'left top'
});

到目前为止，如果 from 元素位于 to 元素的右上角，它只适用于左上角到左上角，但这对我来说已经足够了。

按照我在这里的方式选择元素是否有棱 Angular ？

var from_elem = angular.element( document.querySelector( '#' + attrs.to ) );

然后执行以下操作以获得位置？:

var height_distance = from_elem[0].getBoundingClientRect().top-to_elem[0].getBoundingClientRect().top;