tutorial / directive

angular.module("xn.charts", [])
.directive("xnCharts", [function() {
    var count = 0;
    var link = function($scope, element, attrs, ngModel) {
        var option = {};
        var id = attrs.id;
        var myChart = {};
        
        if(!id) {
            id = "echart"+(count<10?"0"+(count++):count++);
            element.attr("id", id);
        }

        $scope.$watch("chartConfig", function(newVal, oldVal) {

            if(newVal) {
                option = {};
                option = angular.extend(option, $scope.chartConfig);
                myChart = echarts.init(document.getElementById(id));
                myChart.setOption(option);
            }
        }, true);
    };
    return {
        restrict: "AEC",
        scope: {
            chartConfig: "="
        },
        link: link
    };
}]);