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

问题描述

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

我注意到，当该图表的容器具有<$ c时将$ c> ng-show 或 ng-hide 作为属性，图表将不会更新-根本不会显示。 / p>

这是一个展示了这一点的庞克音乐（请参见 scripts.js 指令中的 listeningComponent ）

解决方案

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

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

此处首先执行ng-show条件，然后加载指令，因此您的变量值

因此，尝试使用 ng-if 而不是ng-show。它将解决您的问题。

更改您的listner.html模板。

 < h4>侦听组件指令< / h4> 
< div class = listener> 
< p> 
 {{listenertext}} 
< / p> 
< div class = bar-chart-box ng-if = loading === false>带有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>没有ng-show的
条形图< br> 
< canvas class = chart chart-bar 
 data = chartData.data 
 labels = chartData.labels 
 series = chartData.series> 
< / canvas> 
< / div> 
< / div> 
  

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