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

Question

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

<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) вне метода visualize, и он возвращает как true вместо этого, что он должен возвращать false. Почему это происходит?

Answer 1

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

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

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