问题描述
自己封装了一个echarts
angular.module(’docms’).directive(’eChart’, function () {var eChartDirective = { restrict:’EA’, template:’<p></p>’, replace:true, scope:{option:’=’ }, link:function(scope,eles,attrs,ctrl){var chart = echarts.init(eles[0]);scope.$watch(’option’,function(newOption){ chart = echarts.init(eles[0]); chart.setOption(newOption);},true);window.addEventListener(’resize’,function(){ chart.resize();}) }}return eChartDirective; })
<p ng-class='{true:’col-sm-12’,false:’col-sm-6’}[width]'> <e-chart option = 'option'></e-chart></p>
原来父元素p只占50%，后续由于ng-class调整至100%，但是绘图在50%时已经完成了，现在我只能实现窗口大小调整时的重绘，有没有什么办法监控父元素宽度的变化，在变化时重绘cavans？
问题解答
回答1：谢邀。
这里可以把导致p的class变化的那个变量传给eChart组件。
angular.module(’docms’).directive(’eChart’, function () {var eChartDirective = { restrict:’EA’, template:’<p></p>’, replace:true, scope:{option:’=’,forceRender:’=’ }, link:function(scope,eles,attrs,ctrl){var chart = echarts.init(eles[0]);scope.$watch(’option’,function(newOption){ chart = echarts.init(eles[0]); chart.setOption(newOption);},true);scope.$watch(’forceRender’,function(newOption){ chart.resize();},true);window.addEventListener(’resize’,function(){ chart.resize();}) }}return eChartDirective; })
<p ng-class='{true:’col-sm-12’,false:’col-sm-6’}[width]'> <e-chart option='option' force-render='width'></e-chart></p>
