javascript - 如何使用div Angularjs的id将图像添加到md-dialog

Question

我想将 c3chart id 绑定(bind)到 md-dialog 中存在的 div id。但是当我尝试通过 document.getElementById 获取 div id 时，它返回 null 给我。我不知道我错过了什么。我是 angularjs 的新手，无法找出图表未绑定(bind)到 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
});

下面是我试图将图表绑定(bind)到 div id 的 Controller 部分:

$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

您必须在对话框加载进度完成后访问“图表”元素，或者改用 $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
   }
});