Problem when using <canvas .....> as the template of new directive.

[flexdeviser]

problem as the title. please check jsBin https://jsbin.com/tuziwi/edit?html,css,js,console,output

[jtblin]

Hey, not sure what you're trying to do here but it isn't supported. You should read the doc on how to use the library: http://jtblin.github.io/angular-chart.js/

[flexdeviser]

Did you check my jsBin code? I have tow directives in my javascript file. The difference between these tow directives is the content of "template". If I want to show the chart by using my own directive, I have to use your "angular-chart.js" directive as a child of "DIV". The bad things will happen If the canvas has no parent. .directive('pie', function () { return { restrict: 'E', scope: {}, template: function (element, attrs) { //<div>your directive</div> return '<div><canvas class="chart chart-pie" chart-data="piedatas" chart-labels="pielabels" chart-options="pieoptions"></canvas></div>'; }, controller: function ($scope) { $scope.pielabels = ['A', 'V']; $scope.piedatas = [30, 4]; $scope.pieoptions = {legend: {display: true}}; } } });

[jtblin]

Apologies, I didn't look at it properly. Just got out of a red eye flight this morning and I totally got it wrong...

Would you want to try out with the 2.0 branch? I wonder if it's because the current version adds a div wrapper around the canvas.

[carlosrymer]

I confirmed this is happening on the 2.x branch. You have to wrap the canvas in a container, otherwise you get a "multiple new/isolate scopes on same directive" error.

[lvt1325]

@flexdeviser: I met the same problem. It's gone when I set width and height for the canvas or parent element

[volodymyrlut]

Also this problem appears when you try to do use canvas as the only element of angular component. Making canvas a child of another element resolves it.