I have a challenge with my AngularJS directive that is incorporating a C3.js-based chart. The issue arises from the C3 library not recognizing the DOM element it should be attached to. Here is an excerpt from the directive's link function:
link: function(scope, element, attrs) {
scope.someid = 'id';
scope.chart = c3.generate({
bindto: "#somechart"+scope.someid,
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
}
});
console.log($("#somechart"+scope.someid).size()); // this is a test, outputs 0
}
The template for the directive contains the following code snippet:
<div id="#somechart{{ scope.someid }}">...</div>
The root of the problem lies in c3.generate()'s inability to locate the target element defined by #somechartid. The console.log() outputting 0 indicates that the element is not present in the DOM when the link function is executed.
Interestingly, executing the same chart generation code from the browser console or through an ng-click event successfully renders the chart.
Is there a solution to this issue that does not involve using something like $timeout?
UPDATE 2014-07-15 15:33 Modified the code sample and included relevant lines from the directive's template.