如何使用div的id將圖像添加到md對話框Angularjs

Question

我想將c3chart id綁定到存在於md對話框中的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-對話框上單擊圖像導出按鈕服務：

$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

你必須訪問到「圖表」元素後，對話框加載進度完成或使用$超時代替：

$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 
    } 
});