0

だから私がやりたいことは、生成ボタンをクリックしたときに読み込みディレクティブを表示し、レポートが完了したときに読み込みディレクティブを非表示にすることです。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 ) を試しましたが、false を返す代わりに true を返します。なぜこうなった？

4

1 に答える 1

1

Visualizejs は外部ライブラリであり、angular ライフサイクルには統合されていません。angularを呼び出す$scope.$apply(function)か、モデルが変更されたことを通知する必要があり、GUIを更新する必要があります$scope.$digest()

レポーターは、$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();
            }
        }
    } );
于 2015-06-17T07:22:36.940 に答える