In the dashboard application I am currently making, I have a SVG pie-chart where I want to bind some onclick actions to. I am working in AngularJS and can get everything to work fine in Chrome. In Firefox or IE, however, I cannot get it to work.
Some more info:
- In my angular controller I can set some options, like an optionable function, that I feed to my chart directive
- I want the logic in the directive to attach the given function (if any) and a class to the corresponding pie-slice in the svg
- The class gets applied just as I want, in all browsers
- The function only gets applied in Chrome
- The function is a simple function that binds some data and toggles a modal
Here is my code:
angular.forEach(scope.chartData.data.series, function (item, idx) {
if (typeof item.click == 'function') {
var g = angular.element(svg.children()[idx]);
g.on('click', item.click);
var c = g.attr('class');
g.attr('class', c + ' ct-hoverable');
}
})
I am not a very experienced dev and would greatly appreciate any help getting this to work in Firefox and IE! I've tried googling for some answers but couldn't get any, so gathered courage and posted my first question here.
EDIT: I figured out my problem. In a piece of code not shown here, I wrote:
var svg = angular.element(chart.children('SVG'));
and that needed to be
var svg = angular.element(chart.children('svg'));
instead. (1.5 days of frustration over capital letters, always good value)