Using 'angular-chart.js' in directive

[YehonatanB]

I want to implement my custom directive to present a graph. The graph is rendered by angular-chart.js. According to package documentation, I downloaded the two libararies: angular-chart.js and chart.js. In HTML:

<script src="~/lib/chart.js/dist/Chart.min.js"></script>
<script src="~/lib/angular-chart.js/dist/angular-chart.min.js"></script>

Now, I created the directive cp-graph with this code:

function attach_cpGraph(app)
{
    function cpGraphCntl($scope)
    {
        $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales", "Tele Sales", "Corporate Sales"];
        $scope.data = [300, 500, 100, 40, 120];
    }

    app.directive('cpGraph',['chart.js', function ()
    {
        return {
            restrict: 'E',
            scope: {
                //sources: '='
            },
            templateUrl: /dv/cp-graph',
            controller: cpGraphCntl
        };
    }]);
}

My module is declared by this way:

var app = angular.module('education-report', ['chart.js']); And I attach my custom directive (cp-graph) with the attach(app) function:

attach_cpGraph(app); Questions:

As I'm expecting, The only dependency my code needs is in the directive code - app.directive('cpGraph',['chart.js', function (). Am I right? Am I also should add the dependency in the module level? While executing the code, I get the error:

Error: $injector:unpr

Unknown Provider

Unknown provider: chart.jsProvider <- chart.js <- cpGraphDirective

How to make it work?

[HZooly]

Hello @Copyleaks! You don't have to inject chart.js module in your directive.

This dependency is already injected to your app when declaring your Angular Module: angular.module('education-report', ['chart.js']);

app.directive('cpGraph', function (){ // Directive })