Почему обновление диаграммы не работает, когда в контейнере есть ng-show?

Question

У меня есть скомпилированная директива, которая содержит в себе директиву угловых диаграмм. Js.

Я заметил, что когда в контейнере этой диаграммы есть ng-show или ng-hide в качестве атрибута, график не будет обновляться - он просто не отображается вообще.

Here is a plunker that demonstrates this (см listeningComponent в scripts.js директиве)

Answer 1

Здесь проблема не с нг-шоу и нг скрытие атрибута.

Основной причиной этого является мануфактура DOM.

Здесь выполняется условие 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>