Question

我想将c3chart id绑定到md-dialog中的div id。但是当我尝试通过document.getElementById获取div id时，它会向我返回null。我不知道我错过了什么。我是angularjs的新手，无法找出不与div id绑定的原因图表。

我正在尝试为对话框加载html模板：

<md-dialog aria-label="Export Image" ng-cloak>
    <md-toolbar>
        <div class="md-toolbar-tools">
            <h2>Export Image</h2>
            <span flex></span>
            <md-button class="md-icon-button" ng-click="cancel()">
                <md-icon aria-label="Close dialog">close</md-icon>
            </md-button>
        </div>
    </md-toolbar>
     <md-content layout-padding>
      <div class='legend2'></div> 
       <div id="chart"></div>
      <div class='legend1'></div>  
      <div layout="row" layout-align="center center">
        <md-button md-menu-origin ng-click="exportToPng()">
          <span>Save as PNG</span>   
        </md-button>
        <md-button md-menu-origin ng-click="exportToSvg()">
          <span>Save as SVG</span>   
        </md-button>
      </div>
    </md-content>
</md-dialog>

以下是我用于在单击图像导出按钮时加载md-dialog的服务：

$mdDialog.show({
   controller: 'ExportImagesDisplayCtrl',
   templateUrl: templateUrl,
   parent: angular.element(document.body),
   targetEvent: ev,
   locals: {
        stats: stats,
        filterKey: filterKey,
        filterType: filterType
   },
   clickOutsideToClose: true
});

下面是控制器的一部分，我正在尝试将图表绑定到div id：

$scope.drawC3Chart = function(chartGroup){
     var element = document.getElementById("chart");
     var chart = c3.generate({ 
                    bindto: element,
                    size: {
                            height: 235,
                            width: 330
                    },
                    data: {
                        type: 'bar',
                        json: chartGroup,
                        keys: {
                            x:'name',
                            value: ['to', 'from'],
                        }
                    },
                    axis: {
                        x:{
                            type:'category',
                            label: {
                                text: 'from/to',
                                position: 'outer-center'
                            }
                        },
                        y:{
                            label: {
                                text: 'count',
                                position: 'outer-middle'
                            }
                        }
                    },
                    grid: {
                        y: {
                            show: true
                        }
                    },
                    legend: {
                        show: false
                    },
                    regions: [
                                {axis: 'x', end: 1.5 , class:'regionX2'},
                                {axis: 'x', start: 1.5, end: 6, class:'regionX1' },
                             ]
                });
        }

Answer 1

您必须访问＆＃39;图表＆＃39;对话框加载进度完成后的元素或使用 $ timeout ：

$mdDialog.show({
   controller: 'ExportImagesDisplayCtrl',
   templateUrl: templateUrl,
   parent: angular.element(document.body),
   targetEvent: ev,
   locals: {
        stats: stats,
        filterKey: filterKey,
        filterType: filterType
   },
   clickOutsideToClose: true,
   onComplete: function(){
      $scope.drawC3Chart(); // <---- TODO: draw your chart at here
   }
});

如何使用div Angularjs

1 个答案: