Javascript 当容器上显示ng时，为什么图表更新失败？

我有一个编译指令，其中包含一个angle-charts.js指令

我注意到，当该图表的容器将

ng show

或

ng hide

作为属性时，图表不会更新——它根本不会显示

---

（请参见

scripts.js

指令中的

listingcomponent

）

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

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

在这里，ng show条件首先执行，指令随后加载，所以在指令加载后，变量值在这里发生变化

因此，如果而不是ng show，请尝试使用

ng。它会解决你的问题

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

listingcomponent指令

{{listenertext}}

带ng显示的条形图


不带ng显示的条形图

此外，
ng开关
似乎工作正常

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

listingcomponent指令

{{listenertext}}

带ng显示的条形图


不带ng显示的条形图