传递给 visualizejs 方法时更新变量 angularjs
updating variable when passed into visualizejs method angularjs
所以我想做的是在我单击生成按钮时显示我的加载指令,并在报告完成时隐藏加载指令。由于 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。为什么会这样?
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();
}
}
} );
所以我想做的是在我单击生成按钮时显示我的加载指令,并在报告完成时隐藏加载指令。由于 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。为什么会这样?
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();
}
}
} );