为什么chart.js无法与angular JS一起使用

Question

I am trying to create a chart component in AngularJS (v1.5.8) but for some odd reason chart.js is not getting initialized. 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> 

However the code for the same works in vanilla JS. http://codepen.io/flyinggambit/pen/MbWOmG

What is the reason for this ? How can I fix this ?

Answer 1

You can't have the canvas as the root element and then try to access it in the way you're doing it.

Wrap it in another div to quickly solve your problem:

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