angular-chart.js使用ng-show / ng-hide的问题解决

今天第一次使用angular-chart.js,享受完其使用的简便性、功能的强大和效果的美观之后,无奈的发现在用ng-show / ng-hide时出现了各种奇怪的bug,bug情况如下:

1
<canvas ng-show="showLine" id="line" class="chart chart-line" chart-data="lineData" chart-labels="lineLabels" chart-legend="true" chart-series="lineSeries"></canvas>

当showLine由true变为fals,再变为true后,chart显示无问题,但鼠标mouse over到chart上之后,会显示最初showLine为true时的数据,无语。

解决方案:
猜测原因是ng-show未改变dom,只是切换了disaplay属性,于是将ng-show / ng-hide替换为ng-if,问题解决,代码如下:

1
<canvas ng-if="showLine" id="line" class="chart chart-line" chart-data="lineData" chart-labels="lineLabels" chart-legend="true" chart-series="lineSeries"></canvas>
坚持原创技术分享,您的支持将鼓励我继续创作!