DEFECT: HighStock Angular Directive

by Marko Keuschnig

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-route.min.js"></script>
Test
<div ng-app="App">
    <div data-ng-controller="StockChartController">
        <highstock data-stock-data="summaryLineChartData" data-stock-object="summaryLineChart"></highstock>
    </div>
</div>

JavaScript

angular.module('ngHighCharts', []).directive('highstock', function () {
    return {
        restrict: 'E',
        template: '<div class="highstock"></div>',
        scope: {
            stockData: "=stockData",
            stockObject: "=?"
        },
        transclude: true,
        replace: true,
        link: function ($scope, $element, $attrs) {
            
            //Update when charts data changes
            $scope.$watch('stockData', function (data) {
                if (!data)
                    return;
                
                // use default values if nothing is specified in the given settings
                $scope.stockData.chart.renderTo = $scope.stockData.chart.renderTo || $element[0];
                
                $scope.stockObject = new Highcharts.StockChart($scope.stockData);
            });
        }
    };
});

var App = angular.module('App', ['ngRoute','ngHighCharts']);

App.service('StockChartService', ['$http', function ($http) {
    return {
        initSummaryLineChart: function() {
            return {
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                
                rangeSelector: {
                    selected: 1,
                    inputEnabled: true
                },
                
                title: {
                    text: 'AAPL Stock Price'
                },
                
                series: [
                    {
                        name: 'AAPL',
                        data: [1, 2, 3, 4, 5],
                        tooltip: {
                            valueDecimals: 2
                        }
                    }
                ]
            };
        }
    };
}]);

App.controller("StockChartController", ['$scope', 'StockChartService', function ($scope, StockChartService) {
    $scope.summaryLineChart;
    $scope.summaryLineChartData =...