为什么当其容器上有 ng-show 时图表更新会失败? [英] Why does chart update fail when its container has ng-show on it?

问题描述

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

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

这里有一个 plunker 演示了这一点(参见 listeningComponent 在 scripts.js 指令中)

解决方案

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

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

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

所以尝试使用 ng-if 代替 ng-show.它将解决您的问题.

更改您的 listner.html 模板.

listeningComponent 指令
<div class="listener"><p>{{听众文本}}</p><div class="bar-chart-box" ng-if="loading === false">带有 ng-show
 的条形图<canvas class="chart chart-bar"数据=图表数据.数据"标签=图表数据.标签"series="chartData.series"></画布>

<小时><div class="bar-chart-box">没有 ng-show 的条形图
<canvas class="chart chart-bar"数据=图表数据.数据"标签=图表数据.标签"series="chartData.series"></画布>

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)

解决方案

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>

这篇关于为什么当其容器上有 ng-show 时图表更新会失败?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！