javascript - 当容器上有 ng-show 时，为什么图表更新会失败？

Question

我有一个已编译的指令，其中包含 angular-charts.js 指令。

我注意到，当该图表的容器具有 ng-show 或 ng-hide 作为属性时，图表不会更新 - 它只是不会更新根本不显示。

Here is a plunker that demonstrates this (请参阅 scripts.js 指令中的 listeningComponent)

Answer 1

这里的问题不在于 ng-show 和 ng-hide 属性。

这背后的根本原因是 DOM 操作。

这里首先执行 ng-show 条件，然后加载指令，因此您的变量值在指令加载后在这里发生变化。

所以尝试使用 ng-if 而不是 ng-show。它会解决你的问题。

更改您的listner.html模板。

<h4>listeningComponent Directive</h4>
<div class="listener">  
  <p>
    {{listenertext}}
  </p>
  <div class="bar-chart-box" ng-if="loading === false">
    Bar Graph with ng-show<br>
    <canvas class="chart chart-bar"
      data="chartData.data"
      labels="chartData.labels"
      series="chartData.series">
    </canvas>
  </div>
  <hr>
  <div class="bar-chart-box">
    Bar Graph without ng-show<br>
    <canvas class="chart chart-bar"
      data="chartData.data"
      labels="chartData.labels"
      series="chartData.series">
    </canvas>
  </div>  
</div>