javascript - AngularJS 根据宽度动态改变高度

Question

我有一张通过 ng-repeat 打印的表格，我的目标是让 tbody 中的每个 td 都变成正方形。所有 td 的宽度都相等，所以我只需要检查第一个进行更改。但是，页面是动态的，因此 table 的宽度和 td 将在窗口调整大小时发生变化。

我在 head 中有样式表。

<style type="text/css">.squerify>tr{height:60px;}</style>

这用于通过以下方式更改高度:

document.styleSheets[1].cssRules[0].style.height=document.querySelector('.squerify td').offsetWidht+"px";

它自己工作，但我想知道如何让 Angular 告诉我，td 改变了它的宽度(这里我在考虑 'onresize' 在窗口事件上)。

好吧，onresize 现在可以工作了，但是初始化怎么样？
我还没有找到让 angular 告诉我它完成了所有工作的方法。
PS.: 表格在 View 中，如果有任何改变...

问题如下:

• 是否有更好的方法来检查 Angular 调整页面大小？
• 初始化表用什么？

Answer 1

对于所有想知道如何制作方形元素的人:

1. 我们需要一个基本元素(div 会做)给它类(我会用正方形)，这个将是正方形:

   <div class="square"></div>
   

2. 我们在里面放了一个img标签:(需要“data:...”，不要去掉，是1x1px的透明img)

3. 我们需要一些 CSS:

   .square img{
       width: 100%;
       height: auto;
       border: 0;
   }
   
   .square *:not(img){
       position: absolute;
       top: 0;
       right: 0;
       bottom: 0;
       left: 0;
   }
   

4. 就是这样，简单吧？