Question

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

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

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

Answer 1

此问题不在于 ng-show 和 ng-hide 属性。

这背后的根本原因是DOM manupulation。

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

Answer 2

此外，ng-switch似乎运作良好。

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

为什么图表更新在其容器上显示ng-show时失败？

2 个答案: