在AngularJS Directive的link()函数中没有准备好DOM元素

Question

我正在创建一个AngularJS指令,该指令应该包含一个基于C3.js的图表.问题是C3库没有看到它应该附加的DOM元素.该指令的link功能如下所示:

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
}

该指令的模板包含:

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

问题是,c3.generate()的bindto没有看到#somechartid.在console.log()当我把已经在输出0,这意味着该元素不存在于此刻的DOM link函数被调用.

如果我从浏览器的控制台调用相同的图表生成代码,甚至从某些ng-click图表生成代码.

有没有办法克服这个问题而不使用像这样的解决方案$timeout？

更新2014-07-15 15:33更改了代码示例并添加了指令模板中的相关行.

Answer 1

如果你想操作尚未生成的 dom，请在链接函数中使用 $timeout 函数。看到这个