angular框架下模态框中图表溢出

最近项目中用模态框去显示chart图表内容,发现自己又掉坑里了,话不多说,上图

angular框架下模态框中图表溢出没错,就是这种情况,一般应用bootstrap的模态框,都会自动限制在模态框范围内,但是这个例外,研究了半天,以为是因为容器宽高问题,来回测试了半天,加了各种宽高,只是改变了容器大小,然而图表依旧如此。

后来想到了angular的渲染顺序问题,猜想是否是因为图表优先于模态框渲染而造成的未能识别容器宽高,果断在chart的渲染方法上加入setTimeout(),使其错后于模态框渲染加载。果然,如我所料。

angular框架下模态框中图表溢出
angular框架下模态框中图表溢出

这个angular的坑太深,一步一坑,还要慢慢趟过去,任重道远。