Monece Solis Monece Solis - 5 months ago 15
Javascript Question

updating variable when passed into visualizejs method angularjs

So what I want to do is show my loading directive when I clicked the generate button and hide the loading directive when the report is completed. Since visualize.js has a "reportCompleted" event I updated my fetching variable their as false to hide the loading directive.

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


Here is what's inside my controller:

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


this is the method that is called to show the loading directive and the report

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;
}
}
}
} );
} );
}


What my problem is that even if I have updated my fetching variable in the event listener 'reportCompleted' it still does not hide my loading directive. I tried console.log( self.fetching ) outside the visualize method and it returns as true instead that it should be returning false. Why is this happening?

Answer

visualizejs is a external library and not integrated into the angular lifecycle. you need to call $scope.$apply(function) or $scope.$digest() to notify angular the model has changed and it should update the GUI

your reporter should run in a controller or a directive which gives you access to the $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();
            }
        }
    } );