我是AngularJS的新手,用
dygraphs构建仪表板.
试图将dygraphs网站上的example code放在ng-repeat-list中,只是为了测试.对于y中的每个x,预期相同的样本图.不幸的是,图形没有绘制,只是轴,控制台没有显示任何错误.
<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-repeat,它可以工作(单图) – 所以dygraphs-code是有效的.当然,就像我在这里直接在视图中绘制图形一样没有意义,但我仍然想知道为什么它不起作用.我在这里错过了一些一般性观点吗？
你的问题是Angular会重复你的< div id =“graph”> n次.所以你现在有n次div,其中id为’graph’,这是兄弟姐妹.因此,当您调用document.getElementById(‘graph’)时,这将无法正常工作.
原文链接：https://www.f2er.com/angularjs/143382.html也就是说,我不知道ng-repeat中的脚本标签有多好,看起来像一个非常奇怪的用例.
执行此操作的正确方法(与所有与DOM相关的操作)是使用指令.这是一个例子：
使用Javascript：
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope) {
$scope.graphs = [
{
data: [ [1,opts: { labels: [ "x","B" ] }
},{
data: [ [1,200],42],10],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>
希望这可以帮助！
