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'中更新了我的提取变量，它仍然不会隐藏我的加载指令。我在visualize方法之外尝试了console.log（self.fetching），它返回true，而不是返回false。为什么会这样？

Answer 1

visualizejs是一个外部库，没有集成到角度生命周期中。你需要调用$scope.$apply(function)或$scope.$digest()来通知角度模型已经改变，它应该更新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时更新变量

1 个答案: