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

Navigation
1

I have a directive where I am putting graphics, but I can not understand how I can pass Array from controller to this directive or how can I get that Array using $ http within the directive.

This 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 Array pieData with static data, I would like to briefly pass this data through controller or capture them in the directive itself using $http . How can I do this?

    
asked by anonymous 03.03.2016 / 14:00

2 answers

3

You can use the $ observe pattern to receive notification of changing attributes in the policy 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>
    
03.03.2016 / 21:09
1

You can pass data to a policy as attributes of this policy in its use.

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

Where "arrayPieData" belongs to the scope of the controller where your div is inserted.

To do this you need to change your policy 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 in the directive being "pieData", when you will be using in html, it has to be "pie-data".

    
03.03.2016 / 18:17
Merge two objects with the same ID Location and maps [closed]