chart.js图表​​不会显示或隐藏Angular指令ng-show和ng-hide

Question

我有一个图表，当以静态方式显示时，它可以正常工作。

var ctx = document.getElementById("myChart").getContext("2d");
$scope.lineChart = new Chart(ctx).Line(data, chartConfig);

但是，当我将它包装在ng-show中时，如下所示，它会停止渲染。

<div ng-show="output.showChart">
  <canvas id="myChart"></canvas>
</div>

JS中的某个地方：

$scope.output.showChart = true;
...

感谢。

Answer 1

简短回答：

在 $ timeout 中包装图表（默认超时为0毫秒）有效：

答案很长：

将超时设置为0的超时消除了调用$ apply的必要性，因为$ timeout将触发自己的另一个$摘要周期，这反过来将完成所有必要的更新。

$scope.output.showChart = true;
$timeout(function(){
    if($scope.lineChart){
       $scope.lineChart.destroy();
    }
    var ctx = document.getElementById("myChart").getContext("2d");
    $scope.lineChart = new Chart(ctx).Line(data, chartConfig);
});