传递给 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 )，它 returns 为 true 而不是它应该返回 false。为什么会这样？

Answer 1

visualizejs 是一个外部库，未集成到 angular 生命周期中。您需要调用 $scope.$apply(function) 或 $scope.$digest() 来通知 angular 模型已更改并且应该更新 GUI

你的记者应该运行在控制器或指令中，让你访问 $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();
            }
        }
    } );

传递给 visualizejs 方法时更新变量 angularjs

updating variable when passed into visualizejs method angularjs

javascript

visualize

jasperserver

angularjs