Why does chart update fail when its container has ng-show on it?

Question

I have a compiled directive that contains an angular-charts.js directive in it.

I've noticed that when the container of that chart has ng-show or ng-hide as an attribute, the chart wont update -- it just doesn't show at all.

Here is a plunker that demonstrates this (see listeningComponent in scripts.js directive)

Answer 1

Here the problem is not with the ng-show and ng-hide attribute.

The root cause behind this is is DOM manupulation.

Here ng-show condition is executing first and directive is loading after that so your variable value is changing here after directive loading.

So try with ng-if instead ng-show. It will solve your problem.

Change your listner.html template.

<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>

Answer 2

Also, ng-switch seems to work well.

<h4>listeningComponent Directive</h4>
<div class="listener" ng-switch="loading">  
  <p>
    {{listenertext}}
  </p>
  <div class="bar-chart-box" ng-switch-when="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>

  <!-- can also have a loading state using this method -->
  <div class="loading" ng-switch-when="true"></div>
</div>