我正在创建一个 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 更改了代码示例并添加了指令模板中的相关行。
最佳答案
如果要操作尚未生成的 dom,请在链接函数中使用 $timeout 函数。参见 this
关于javascript - AngularJS 指令的 link() 函数中的 DOM 元素未准备好,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24744311/