问题描述
限时送ChatGPT账号..我有一个编译指令,其中包含一个 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屋!
更多推荐
[db:关键词]
发布评论