Link-Funktion der Direktive wird nicht aufgerufen

Question

Ich habe ein Szenario, in dem ich ein Tortendiagramm in einem Popup-Modal anzeigen muss (Ui-Bootstrap-Modal verwendet). Ich verwendete c3.js für meine Kreisdiagrammanforderung (innerhalb einer Direktive).

Das Tortendiagramm wird nicht geladen. Aber zu meiner Überraschung, als ich versuchte, das Problem zu debuggen, als ich die Konsole öffnete, wird es geladen. Wenn ich das Fenster neu skaliere, wird es geladen.

Wie kann ich dieses Problem beheben?

'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

Ich habe es von Leimeigenschaft geben:

  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

Sind shure Sie, dass Sie Ihre Richtlinie ordnungsgemäß in Ihrem HTML-Code als

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

Vielleicht haben Sie zu ändern, sind Ihre Beschränkung auf "E", um Ihre Anweisung als Markierung zu verwenden

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

Der Grund sein könnte, dass Sie im Moment versuchen, ist das Diagramm, Ihre '#chart' div erzeugen noch nicht in der dom Baum. Daher müssen Sie die Größe ändern, um eine neue Zeichnung auszulösen. Versuchen Sie, warten Sie, bis das dom geladen wird

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