angularjs – Dygraphs不使用ng-repeat
发布时间:2020-12-17 07:52:13 所属栏目:安全 来源:网络整理
导读:我是AngularJS的新手,用 dygraphs构建仪表板. 试图将dygraphs网站上的example code放在ng-repeat-list中,只是为了测试.对于y中的每个x,预期相同的样本图.不幸的是,图形没有绘制,只是轴,控制台没有显示任何错误. li ng-repeat="x in y" div id="graph" script
我是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’)时,这将无法正常工作.
也就是说,我不知道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> JSFiddle 希望这可以帮助! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |