指令のリンク機能が呼び出されていません

Question

ポップアップモーダル（ui-bootstrapモーダルを使用）で円グラフを表示する必要があるシナリオがあります。私はc3.jsを私の円グラフの要求（ディレクティブの内側）に使用しました。

ポップアップ内に円グラフが読み込まれていません。しかし、驚いたことに、コンソールを開いたときに問題をデバッグしようとしたときに、コンソールがロードされています。ウィンドウの大きさを変更すると、ウィンドウが読み込まれます。

この問題を解決するにはどうすればよいですか？

'use strict'; 
angular.module('App') 
    .directive('pieChartDirective', function() { 
     return { 
      restrict: 'A', 
      scope: { 
       chartdata: '=', 
      }, 
      link: function(scope, elem, attrs) { 
       var chart = c3.generate({ 
        bindto: '#chart', 
        data: { 
         columns: [ 
          ['Javascript', scope.chartdata.Javascript], 
          ['HTML', scope.chartdata.HTML], 
          ['Css', scope.chartdata.Css], 
          ['Angular', scope.chartdata.Angular], 
          ['Bootstrap', scope.chartdata.Bootstrap], 
          ['Jquery', scope.chartdata.Jquery], 
          ['Communication', scope.chartdata.Communication] 
         ], 
         type: 'pie', 
        }, 
        legend: { 
         show: false 
        }, 
        tooltip: { 
         format: { 
          value: function(value, ratio, id, index) { 
           return value; 
          } 
         } 
        } 
       }); 
      } 
     }; 
    }); 

HTML：

 <div pie-chart-directive chartdata="oChartData"> 
     <div id="chart"></div> 
     </div> 

Answer 1

をロードされるまで待つようにしてください：

  link: function(scope, elem, attrs) { 
      var chart = c3.generate({ 
       bindto: '#chart', 
       size: { 
        width:400, 
        height:350 
       }, 
       data: { 
        columns: [ 
         ['Javascript', scope.chartdata.Javascript], 
         ['HTML', scope.chartdata.HTML], 
         ['Css', scope.chartdata.Css], 
         ['Angular', scope.chartdata.Angular], 
         ['Bootstrap', scope.chartdata.Bootstrap], 
         ['Jquery', scope.chartdata.Jquery], 
         ['Communication', scope.chartdata.Communication] 
        ], 
        type: 'pie', 
       }, 
       legend: { 
        show: false 
       }, 
       tooltip: { 
        format: { 
         value: function(value, ratio, id, index) { 
          return value; 
         } 
        } 
       } 
       }); 
      } 

Answer 2

あなたはたぶん、あなたはあなたを変更する必要が

<div pie-chart-directive></div>

として、あなたのhtmlコードに正しくディレクティブが含まれていることを、SHUREですあなたのディレクティブをタグelmentとして使用するための 'E'への制限

<pie-chart-directive chartdata="myData"></pie-chart-directive>

の理由は、あなたがチャートを生成しようとした瞬間に、あなたの'#chart'のdivがまだDOMツリー内に存在しないことを、可能性があります。したがって、新しい描画を開始するには、サイズを変更する必要があります。私はサイズのプロパティを与えることによってそれを得たDOMは

$('#chart').ready(function() { 
     var chart = c3.generate({ 
       bindto: '#chart', 
       data: { 
        columns: [ 
         ['Javascript', scope.chartdata.Javascript], 
         ['HTML', scope.chartdata.HTML], 
         ['Css', scope.chartdata.Css], 
         ['Angular', scope.chartdata.Angular], 
         ['Bootstrap', scope.chartdata.Bootstrap], 
         ['Jquery', scope.chartdata.Jquery], 
         ['Communication', scope.chartdata.Communication] 
        ], 
        type: 'pie', 
       }, 
       legend: { 
        show: false 
       }, 
       tooltip: { 
        format: { 
         value: function(value, ratio, id, index) { 
          return value; 
         } 
        } 
       } 
      }); 
});