Обновление переменной при передаче в метод visualizejs angularjs

Question

Поэтому я хочу показать свою директиву загрузки, когда я нажал кнопку "Создать", и скрыть директиву загрузки после завершения отчета. Так как в visualize.js есть событие "reportCompleted", я обновил переменную извлечения их как ложные, чтобы скрыть директиву загрузки.

<button class="btn btn-default" data-ng-click="vm.generateReport(filter)">Generate</button>

<div class="text-center info-message" data-ng-show="vm.fetching">
    <loading message="Fetching report..."></loading message>
    <span>{{vm.fetching}}</span>
</div>

Вот что внутри моего контроллера:

var self = this;
// this is declared on top as default variable
self.fetching = false;

этот метод вызывается для отображения директивы загрузки и отчета

function generateReport ( filterData ) {
    // show loading directive
    self.fetching = true;

    v( '#report' ).report( {
        'resource'  : '/public/Samples/Reports/01._Geographic_Results_by_Segment_Report',
        'container' : '#report',
        'error'     : handleError,
        'events': {
            'reportCompleted' : function( status ) {
                self.fetching = true;

                if( status === 'ready' ) {
                    // hide loading directive
                    self.fetching       = false;
                    self.reportRendered = true;
                }
            }
        }
    } );
  } );
}

Моя проблема в том, что даже если я обновил свою переменную извлечения в приемнике событий reportCompleted, он все равно не скрывает мою директиву загрузки. Я пробовал console.log (self.fetching) вне метода визуализации, и он возвращает значение true, вместо этого он должен возвращать false. Почему это происходит?

Answer 1

visualizejs - это внешняя библиотека, не интегрированная в угловой цикл. тебе нужно позвонить $scope.$apply(function) или же $scope.$digest() чтобы уведомить угловую модель изменилась и она должна обновить графический интерфейс

ваш репортер должен работать в контроллере или директиве, которая дает вам доступ к $scope:

 v( '#report' ).report( {
        'resource'  : '/public/Samples/Reports/01._Geographic_Results_by_Segment_Report',
        'container' : '#report',
        'error'     : handleError,
        'events': {
            'reportCompleted' : function( status ) {
                self.fetching = true;

                if( status === 'ready' ) {
                    // hide loading directive
                    self.fetching       = false;
                    self.reportRendered = true;
                }

                $scope.$digest();
            }
        }
    } );