【javascript-待解决】 监听父容器大小变化

在进行 angular 组件开发前期，曾提出由于布局组件的存在，元素大小变化不应只由 window 的 resize 引起，所以一些需要根据容器参数进行计算的组件需要监听父容器的 resize，目前似乎没有现成的方法（除IE11 以下可以通过 element.attachEvent('onresize', fn) 实现）。
后来引入了网上的一个 resizeListener 实现，大体思想如下：
- 在父容器里添加一个div（下图红框中）



- 定义了上图的样式后，初始化时执行一次绿框中代码
- 此时容器一旦发生大小变化就会触发expand-trigger（变大）或contract-trigger（变小）的 scroll 事件
- 我们只需监听 resize-triggers 的 scroll 事件
感觉这个想法挺神奇的，可惜的是后期发现：若父容器初始时隐藏（如：display:none），在将其改为显示时，无法触发 scroll 事件。实际场景可能是，tabset 中默认打开第一页，第二页中有一个撑满内容的 datagrid，当我们切换到第二页时，没有触发 resize 的操作，导致 datagrid 不能正常显示。
目前要解决的最主要问题就是如何在父元素由隐藏变为显示时发出通知。。。angular 中想过直接监听 clientWidth、clientHeight，但是实现时会出现延迟，不能满足要求

参考了 ligerUI 和 easyUI，ligerUI 应该是没有考虑这个问题，easyUI 中对可能引起这种情况的组件的显示操作中手动触发了resize相关事件，对于用户自定义的容器似乎也没有太好的解决方法。