Question

我试图在我的控制器中调用我的指令功能。我想重塑曲线。目前，我可以在指令范围内做。但我需要外包电话。你知道我该怎么办？

我的指示：

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

在我的控制器中，我需要更新我的图表。所以我想调用函数：

$scope.redrawCurve = function(_index) {

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

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

THX，亚历

Answer 1

我的建议是使用event来通知指令重绘绘图，如下所示：

控制器：

$scope.redrawCurve = function(_index) {

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

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

指令：

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

AngularJS：指令和控制器之间的链接

1 个答案: