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

我尝试在HTML/CSS中获得以下内容，基本上是在角落中的对角线“连接”正方形：

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

现在我正在使用div，并使用一个自定义的角度指令来转换它们，在这里我传入它试图附加到的元素，但我想知道是否有更简单的方法来表示它？对我来说，这看起来很像JQuery风格，因为我对Angular还不熟悉，所以我想试着远离它

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

这是我目前的尝试：另外，由于某种原因，我的侧标签似乎没有在中心对齐，不知道为什么

---

谢谢

我将指令更改为以下内容：

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

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

像我在这里做的那样选择元素是不是有点奇怪

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

然后执行以下操作以获得该职位：

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

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

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