ChartJS与AngularJS

Question

如何在自定义角度指令中显示canvas元素？

我对angularjs很新。请告诉我有关angularjs的chartjs的任何演示/想法。

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

这是我在js-＆gt;

中尝试过的

IpAddrCtrl

Answer 1

在指令中，您无法访问特定控制器的范围变量。要了解范围访问指令，请尝试此https://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-2-isolate-scope

您也可以尝试以下代码

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

在HTML中，您可以将angularjs范围数据传递给自定义指令标记上的变量，并将其置于指令中并在模板中使用它。

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