Sending a value from html to controller in angularjs. Issue with scope? - angularjs

Question

I have have a web app set up to display charts using the highcharts-ng directive.
I have the same type of chart with the same series data displaying on multiple views. The only difference between the charts is the height value which I would like to be able to set when I initialise my chart in my html markup.
This is how I have set things up:
The highcharts-ng directive is installed through bower.
I initialise my chart as follows:
<div ng-controller="AgeChartController" >
<highchart diagramHeight="500" id="{{link + '_chart'}}" config="ageChartConfig">
</highchart></div>
In my AgeChartController I do the following:
Pull data from JSON file
Get chart height attribute from diagramHeight
Construct Highcharts options object and send diagramHeight to this options object
angular.module('socialDashboard')
.controller('AgeChartController', function ($scope, $http, $attrs) {
var seventeenCount = 0;
var eighteenCount = 0;
var twentyFiveCount = 0;
var thirtyFiveCount = 0;
var chartHeight = 0;
var posts = [];
$http.get('dummy_content.json')
.then(function(res){
posts = res.data;
for (var i = 0; i < posts.length; i++) {
if (posts[i].age <= 17) {
seventeenCount++;
}
else if ((posts[i].age >= 18) && (posts[i].age <= 24)) {
eighteenCount++;
}
else if ((posts[i].age >= 25) && (posts[i].age <= 34)) {
twentyFiveCount++;
}
else if (posts[i].age >= 35) {
thirtyFiveCount++;
}
}
chartHeight = $attrs.diagramHeight;
$scope.ageChartConfig = {
options: {
chart: {
type: 'bar',
height: chartHeight,
backgroundColor: false
}
},
title: {
text: false
},
xAxis: {
categories: ['< 17', '18 - 24', '25 - 34', '> 35']
},
yAxis: {
gridLineWidth: 0,
title: {
text: 'Post count'
},
labels:
{
enabled: false
}
},
plotOptions: {
series: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
floating: true,
backgroundColor: '#FFFFFF',
align: 'right',
verticalAlign: 'top',
y: 60,
x: -60
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
this.x + ': ' + this.y;
}
},
navigation: {
buttonOptions: {
enabled: false
}
},
series: [{
name: 'Post count',
showInLegend: false,
data: [{
color: '#9365b8',
y: seventeenCount
}, {
color: '#2c82c9',
y: eighteenCount
}, {
color: '#41a85f',
y: twentyFiveCount
}, {
color: '#fac51c',
y: thirtyFiveCount
}]
}],
loading: false
};
});
});
However when I declare my chart elsewhere with diagramHeight set to 200:
<div ng-controller="AgeChartController">
<highchart diagramHeight="200" id="{{link + '_chart'}}" config="ageChartConfig">
</highchart></div>
Only one of the two values get pulled and my chart is set the same across all charts (height 500). Why is this? Does this have something to do with my scope? I'm pretty new to angular and still getting my head around scope.

Answer 1

You should use angular factory to configure chart
app.factory('chartname', function () {
var agechart={ // your all chart option here
.
.
}
return agechart;
});
You can use above factory in any controller now just like
app.controller("controllername",function(chartname){
$scope.ageChartConfig=chartname;
});