[Chartjs]-ChartJS with AngularJS

by

2👍

✅

In directive you can’t access the scope variable of particular controllers.To know about scope access directive try this https://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-2-isolate-scope

You can also try the below code

demo.directive('chartdiv', function() {

return {
transclude: true,
restrict: 'E',
 scope: {
            chartLbl: "@",
            chartseries:"@",
            chartopt:"@",
            chartData:"@",
            colr_nofill:"@",
            
    },
template: '<canvas id="chartNew" 
chart-data="chartData" chart-labels="chartLbl" chart-series="chartseries" 
width="700" height="280" chart-colors="colr_nofill" chart-
options="chartopt">
</canvas>'

    link: function(scope){
    /*You can add css class here */
    chartNew.addClass("chart");
    }
};
});

In HTML you can pass the angularjs scope data in a variable on custom directive tag and get it in directive and use it in the template.

<chart chartData="{{chart_chartData}}" 
chartLbl="{{chart_chartLbl}}" chartopt="{{chart_chartopt}}" 
colr_nofill="{{chart_colr_nofill}}" 
chartseries="{{chart_chartseries}}"> 
</chart>

Leave a comment