Angular chartjs directive

Question

I want to use this angularJS directive for chartjs http://earlonrails.github.io/angular-chartjs-directive/

The only issue is that it uses the HTML5 element chart:

 <chart value="myChart"></chart>

Is it possible to convert this to a directive and use it as follows? So instead of a object, we use it as an attribute of a div.

<div chart-use="myChart" />

Update:

I revised the code on chart-js directive as follows:

angular.module('chartjs-directive', []).
directive('div-chart', function () {
var baseWidth = 600;
var baseHeight = 400;

return {
  restrict: 'A',
  template: '<canvas></canvas>',
  scope: {
    //chartObject: "=value"
  },
 ..............
 ............
    });

and UI like this:

  <!--<chart value="myChart" id="myCoolChart"></chart>-->
  <div id="myColChart" div-chart></div>

But this is not working. I assume it's because of this:

 $scope.myChart.data = data;

But I'm not sure how to fix it.

Answer 1

Found the way to do it.

angular.module('chartjs-directive', []).
 directive('divChart', function () {
var baseWidth = 600;
var baseHeight = 400;

return {
  restrict: 'A',
  template: '<canvas></canvas>',
  scope: {
    divChart:"=",
    chartObject: "=value"
  },
------
------
});

In HTML:

 <div id="myColChart" div-Chart value="myChart"></div>

I know this is basic stuff, but this is the first time I'm working with angular.

Answer 2

For this you need to change directive name and its restrict value.

Your chart directive should look like this:

 app.directive('chartUse', function () {

    return {
       restrict: "A",
       .....
    }
 });