Question

我正在尝试在HTML / CSS中获得以下内容（基本上是对角线＆＃39;连接角落中的方块）：

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

现在我正在使用div并使用自定义Angular指令对其进行转换（我传递了它试图附加到的元素），但我想知道是否有更简单的方法来表示它？它对我来说似乎非常JQuery-esque，因为我是Angular的新手，我想试着偏离它。

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

以下是我目前的尝试：http://plnkr.co/edit/XqwpRKlVqfVlwnA8KZ0f?p=preview（另外，由于某些原因，我的身边标签似乎没有在中心对齐，不知道为什么......）

谢谢！

Answer 1

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

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

<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>

该指令现在是＆＃34; draw-line，＆＃34;它基本上使用数学来确定长度：

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元素的右上角，但这对我来说已经足够了。

按照我在这里做的方式选择元素有角度吗？

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

然后执行以下操作以获取职位？：

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

相对于AngularJS中的其他元素动态变换元素

1 个答案: