DOM elements not ready in AngularJS Directular link () function

Question

I am creating an AngularJS directive which assumes

The template for the directive has this:

<div id="#somechart{{ scope.someid }}">...</div> 

The problem is that c3.generate() bindto does not see #somechartid . console.log() I entered outputs 0, which means that the element is not in the DOM the moment the link function is called.

If I call the same code generating the chart from the browser console, or even with some ng-click , the chart gets rendered.

Is there a way to overcome this problem without using a solution like $timeout ?

UPDATE 2014-07-15 15:33 Sample code has been changed and the corresponding line from the directive template has been added.

Answer 1

Use the timeout function in the link function if you want to manipulate a dom that has not yet been created. See this

Answer 2

Have you tried something like this

 link: function(scope, element, attrs) { scope.chart = c3.generate({ bindto: element[0], data: { columns: [ ['data1', 30, 200, 100, 400, 150, 250], ['data2', 50, 20, 10, 40, 15, 25] ] } }); } 

Answer 3

Maybe using element.find ('# id') will help:

 link: function(scope, element, attrs) { var item = element.find('#somechartid'); scope.chart = c3.generate({ bindto: item, data: { columns: [ ['data1', 30, 200, 100, 400, 150, 250], ['data2', 50, 20, 10, 40, 15, 25] ] } }); }