AngularJS : link between directive and controller

Question

I'm trying to call a function of my directive in my controller. I would like to reshape a curve. At the moment, I can do within the Directive. But I need to outsource the call. Do you know how can I proceed?

My directive :

.directive('drawCharts', function () {
    return function (scope, element, attrs) {
        scope.$watch('curveArray', function () {
            drawPlot();
        }, true);

        var drawPlot = function () {
            /* Define var for interactive chart */
        var tickInterval = scope.intervalMillisecond;
        var typeLine = 'line';

            var chart = function (curveArrayShow, typeLine, optionLineBool, yAxisCurveArrayShow, pointStart, pointEnd) {
                var optionLine = { dataLabels: { enabled: optionLineBool, y: -20 }};
                new Highcharts.Chart({
                chart: {
                    pinchType: 'x',
                    renderTo: 'container',
                    type: typeLine,
                    backgroundColor:'rgba(255, 255, 255, 0.95)',
                    events: {
                        load: function(event) {
                            //alert ('Chart loaded : ' + event);
                            //scope.isLoading = false;
                        }
                    }
                },
                legend: {
                  enabled: false
                },
                title: {
                    text: ''
                },
                xAxis: [{
                    type: 'datetime',
                    labels: {
                        format: '{value: <b>%d/%m</b> %H:%M}',
                        staggerLines: 1
                    },          
                    opposite: true,
                    plotLines: [{
                        color: '#FF0000', // Red
                        width: 2,
                        value: new Date().getTime() // Position, you'll have to translate this to the values on your x axis
                    }],
                    min: pointStart,
                    max: pointEnd,
                    minPadding: 0,
                    maxPadding: 0,
                    startOnTick: false,           // allow to start not from tick
                    endOnTick: false,
                    tickInterval: tickInterval
                }],
                yAxis: yAxisCurveArrayShow,
                tooltip: {
                    style:{ zindex: 10 },
                    xDateFormat: '%d/%m %H:%M',
                    shared: true,
                },
                plotOptions: {
                    column: { borderWidth: 1, borderColor: '#000000' },
                    spline: {
                        marker: {
                            radius: 4,
                            lineColor: '#666666',
                            lineWidth: 1
                        }
                    },
                    series: {
                        dataLabels: {
                            enabled: optionLineBool,
                            style: {font: 'bold 11px Arial', textShadow: '0 0 3px white, 0 0 3px white'}
                        },
                        marker: {
                            lineColor: null,
                            radius: 6,
                            states: {
                                hover: {
                                    radius: 10
                                }
                            }
                        }
                    },
                    line: optionLine
                },
                series: curveArrayShow
            }}

            var pointStart = scope.intervalResearchTime.startDateTime + scope.intervalMillisecond; //remove padding that adding for serie type column
            var pointEnd = scope.intervalResearchTime.endDateTime - scope.intervalMillisecond; //remove padding that adding for serie type column
            chart(scope.curveArray, typeLine, false, scope.yAxisCurveArray, pointStart, pointEnd);
        }
    };

In my controller i need to update my chart. So i would like to call the function :

$scope.redrawCurve = function(_index) {

    /* My algorithm ...... */

    chart(curveArrayShow, typeLine, false, $scope.yAxisCurveArray, pointStart, pointEnd);
};

Thx, Alex

Ye Liu · Accepted Answer · 2014-03-11 19:24:12Z

1

My suggestion is to use event to notify the directive to redraw the plot, like this:

Controller:

$scope.redrawCurve = function(_index) {

    /* My algorithm ...... */

    $scope.$broadcast('redraw', arg1, arg2, /* other necessary arguments */);
};

Directive:

scope.$on('redraw', function(arg1, arg2, /* other necessary arguments */) {
    drawPlot();
});

answered Mar 11, 2014 at 19:24

Ye Liu

8,9861 gold badge40 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS : link between directive and controller

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related