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，这意味着在调用link函数时该元素不存在于DOM中。

如果我从浏览器的控制台调用相同的图表生成代码，或者甚至从某些ng-click调用图表，那么图表就会被渲染。

有没有办法在不使用$timeout等解决方案的情况下克服此问题？

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

Answer 1

如果要操作尚未生成的dom，请在链接函数中使用$ timeout函数。见this

Answer 2

你有没有试过这样的东西

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

使用 element.find（'＃id'）可能会有所帮助：

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]
            ]
        }
    });         
}

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

3 个答案: