Dygraphs与吴先生重复工作 [英] Dygraphs not working with ng-repeat
问题描述
我是新来AngularJS和构建仪表板 dygraphs 。
I'm new to AngularJS and building a dashboard with dygraphs.
试图把从dygraphs网站例如code 在NG-重复列表,只是为了测试。预计y中每x相同的样品图。不幸的是,图中没有得到拉伸,只是轴,控制台不显示任何错误。
Tried to put the example code from the dygraphs website in an ng-repeat-list, just to test. Expected the same sample graph for every x in y. Unfortunately the graph doesn't get drawn, just the axes, console doesn't show any errors.
<li ng-repeat="x in y">
<div id="graph">
<script>
new Dygraph(document.getElementById("graph"),
[ [1,10,100], [2,20,80], [3,50,60], [4,70,80] ],
{ labels: [ "x", "A", "B" ] });
</script>
</div>
</li>
如果我删除NG重复,它的工作原理,但(单图) - 这样的dygraphs- code是有效的。当然,这没有任何意义,直接绘制图形视图像我一样在这里,我仍然不知道为什么它不工作。我错过了一些普遍的观点在这里?
If I remove ng-repeat, it works though (single graph) – so the dygraphs-code is valid. Of course it doesn't make sense to draw the graphs directly in the view like I did here, still I wonder why it doesn't work. Am I missing some general point here?
推荐答案
您的问题是,角会重复你的&LT; DIV ID =图&GT;
n倍。所以,你现在有n次分度'图',这是同级中的ID。因此,当你调用的document.getElementById('图')
,将不能很好地工作。
Your problem is that Angular will repeat your <div id="graph">
n times. So you now have n times div with id of 'graph' which are siblings. Therefore, when you call document.getElementById('graph')
, that won't work very well.
这是说,我不知道如何脚本以及标签中NG重复工作要么,似乎是一个很奇怪的用例。
That said, I don't know how well script tags inside ng-repeat works either, seems like a very strange use case.
要做到这一点(与所有DOM相关操作)的正确方法,是使用一个指令。这里有一个例子:
The proper way to do this (as with all DOM related operations), is to use a directive. Here's an example:
使用Javascript:
Javascript:
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.graphs = [
{
data: [ [1,10,100], [2,20,80], [3,50,60], [4,70,80] ],
opts: { labels: [ "x", "A", "B" ] }
},
{
data: [ [1,10,200], [2,20,42], [3,50,10], [4,70,30] ],
opts: { labels: [ "label1", "C", "D" ] }
}
];
});
myApp.directive('graph', function() {
return {
restrict: 'E', // Use as element
scope: { // Isolate scope
data: '=', // Two-way bind data to local scope
opts: '=?' // '?' means optional
},
template: "<div></div>", // We need a div to attach graph to
link: function(scope, elem, attrs) {
var graph = new Dygraph(elem.children()[0], scope.data, scope.opts );
}
};
});
HTML
<div ng-controller="MyCtrl">
<graph ng-repeat="graph in graphs" data="graph.data" opts="graph.opts"></graph>
</div>
希望这有助于!
这篇关于Dygraphs与吴先生重复工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!