chart.jsが角型JSで機能しないのはなぜですか？

Question

AngularJS（v1.5.8）でグラフコンポーネントを作成しようとしていますが、何らかの理由でchart.jsが初期化されません。 http://codepen.io/flyinggambit/pen/eBYezK

angular.module("dashboard", []) 
 
    .component("exceptionChart", { 
 
    template: "<canvas width='200' height='200' class='{{$ctrl.class}}'></canvas>", 
 
    bindings: { 
 
     class: '@' 
 
    }, 
 
    controller: function($element) { 
 
     this.$postLink = function() { 
 
     
 
     // code for chart 
 
     var ctx = $element.find('canvas')[0]; 
 
     var myChart = new Chart(ctx, { 
 
      type: 'bar', 
 
      data: { 
 
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
 
      datasets: [{ 
 
       label: '# of Votes', 
 
       data: [12, 19, 3, 5, 2, 3], 
 
       backgroundColor: [ 
 
       'rgba(255, 99, 132, 0.2)', 
 
       'rgba(54, 162, 235, 0.2)', 
 
       'rgba(255, 206, 86, 0.2)', 
 
       'rgba(75, 192, 192, 0.2)', 
 
       'rgba(153, 102, 255, 0.2)', 
 
       'rgba(255, 159, 64, 0.2)' 
 
       ], 
 
       borderColor: [ 
 
       'rgba(255,99,132,1)', 
 
       'rgba(54, 162, 235, 1)', 
 
       'rgba(255, 206, 86, 1)', 
 
       'rgba(75, 192, 192, 1)', 
 
       'rgba(153, 102, 255, 1)', 
 
       'rgba(255, 159, 64, 1)' 
 
       ], 
 
       borderWidth: 1 
 
      }] 
 
      }, 
 
      options: { 
 
      scales: { 
 
       yAxes: [{ 
 
       ticks: { 
 
        beginAtZero: true 
 
       } 
 
       }] 
 
      } 
 
      } 
 
     }); 
 
     
 
     
 
     
 
     } 
 
    } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js"></script> 
 
<div ng-app="dashboard"> 
 
    <exception-chart class=""></exception-chart> 
 
</div> 
 

 

 
<canvas id="myChart" width="200" height="200"></canvas>

しかしバニラJSで同じ作品のためのコード。 http://codepen.io/flyinggambit/pen/MbWOmG

この理由は何ですか？これをどうすれば解決できますか？

Answer 1

キャンバスをルート要素として使用することはできません。また、キャンバスにはルート要素としてアクセスすることはできません。

すぐにあなたの問題を解決するために、別のdivで包み：

"<div><canvas width='200' height='200' class='{{$ctrl.class}}'></canvas></div>"