How to pass an array that is in the controller to a directive

Question

I have a directive where I mount some graphics, but I’m not getting to understand how I can pass a Array of controller for this directive or so how can I catch this Array using $http within the directive.

That is the directive:

.directive('pieDonut', function(){
        return {
            restrict: 'A',
            link: function(scope, element, attrs){
                var pieData = [
                    {data: 40, color: '#F44336', label: 'Negadas'},
                    {data: 43, color: '#03A9F4', label: 'Aprovadas'},

                ];

                /* Pie Chart */

                if($('#pie-chart')[0]){
                    $.plot('#pie-chart', pieData, {
                        series: {
                            pie: {
                                show: true,
                                stroke: {
                                    width: 2,
                                },
                            },
                        },
                        legend: {
                            container: '.flc-pie',
                            backgroundOpacity: 0.5,
                            noColumns: 0,
                            backgroundColor: "white",
                            lineWidth: 0
                        },
                        grid: {
                            hoverable: true,
                            clickable: true
                        },
                        tooltip: true,
                        tooltipOpts: {
                            content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
                            shifts: {
                                x: 20,
                                y: 0
                            },
                            defaultTheme: false,
                            cssClass: 'flot-tooltip'
                        }

                    });
                }
            }
        }
    })

At the beginning of the directive I have the Array pieData with static data, briefly I would like to pass this data through the controller or capture them in the directive itself using $http. How can I do that?

Answer 1

You can use the $note standard to receive notification of changing attributes in the directive call. A functional example follows below:

var app = angular.module('sampleApp', []);

app.controller('SampleController', function ($scope) {
 $scope.pieData = [
                    {data: 40, color: '#F44336', label: 'Negadas'},
                    {data: 43, color: '#03A9F4', label: 'Aprovadas'},

                ];
  
})
       .directive('sampleDirective', function () {
        return {
            restrict: 'AE',
            scope: true,
            template: '<div>Valor na diretiva: {{valorDiretiva}}</div>',
            link: function ($scope, elem, attr) {

                attr.$observe('pieData', function (valorExterno) {
                    $scope.valorDiretiva = valorExterno;
                });
            }
        }
    })

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.js"></script>
<div ng-app="sampleApp">

  <div ng-controller="SampleController">
    <div sample-directive pie-data='{{pieData}}'>
  </div>
</div>

Answer 2

You can pass data to a directive as attributes of this directive in your use.

Example: <div pie-donut pie-data="arrayPieData"></div>

Where "PieData array" belongs to the Scope of the controller where your div is inserted.

To do this you need to change your directive as follows:

.directive('pieDonut', function(){
    return {
        restrict: 'A',
        scope: {
           pieData: "="
        },
        controller: function(scope, element, attrs){
            /* Pie Chart */

            if($('#pie-chart')[0]){
                $.plot('#pie-chart', scope.pieData, {
                    series: {
                        pie: {
                            show: true,
                            stroke: {
                                width: 2,
                            },
                        },
                    },
                    legend: {
                        container: '.flc-pie',
                        backgroundOpacity: 0.5,
                        noColumns: 0,
                        backgroundColor: "white",
                        lineWidth: 0
                    },
                    grid: {
                        hoverable: true,
                        clickable: true
                    },
                    tooltip: true,
                    tooltipOpts: {
                        content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
                        shifts: {
                            x: 20,
                            y: 0
                        },
                        defaultTheme: false,
                        cssClass: 'flot-tooltip'
                    }

                });
            }
        }
    }
})

To pass the data just do as I said at the beginning of the answer. Although the directive is "pieData", when you use it in html, it has to be "pie-data".