Angularjs 带角的沙图

如何在自定义角度指令中显示画布元素

我对angularjs很陌生。请给我任何关于angularjs的chartjs的演示/想法

注意：我希望自定义指令显示图表

这就是我在js中尝试的->

var demo = angular.module('newchart');

demo.directive('chartdiv', function() {
    return {
        restrict: 'E',
        template: '<canvas id="chartNew" class="chart chart-line col-md-12 col-sm-12" chart-data="chartData" chart-labels="chartLbl" chart-series="chartseries" width="700" height="280" chart-colors="colr_nofill" chart-options="chartopt"></canvas>'
    };
});

var demo=angular.module（'newchart'）；
demo.directive（'chartdiv'，function（）{
返回{
限制：'E'，
模板：“”
};
});

在指令中，您无法访问特定控制器的scope变量。要了解scope access指令，请尝试以下操作

您也可以尝试下面的代码

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");
    }
};
});

demo.directive（'chartdiv'，function（）{
返回{
是的，
限制：'E'，
范围：{
chartLbl:“@”，
图表系列：“@”，
chartopt:“@”，
图表数据：“@”，
colr_nofill:“@”，
},
模板：'
'
链接：功能（范围）{
/*您可以在这里添加css类*/
chartNew.addClass（“图表”）；
}
};
});

在HTML中，您可以在自定义指令标记上的变量中传递angularjs范围数据，并在指令中获取它，然后在模板中使用它

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

---

请尝试此链接1+以获取您共享的链接。。。！