Dygraphs 不适用于 ng-repeat [英] Dygraphs not working with ng-repeat

问题描述

我是 AngularJS 的新手，正在使用 dygraphs 构建仪表板.

试图将来自 dygraphs 网站的 示例代码 放在 ng-repeat-list 中，只是为了测试.y 中的每个 x 都期望相同的示例图.不幸的是，图形没有被绘制，只是轴，控制台没有显示任何错误.

<div id="图形"><脚本>new Dygraph(document.getElementById("graph"),[ [1,10,100], [2,20,80], [3,50,60], [4,70,80] ],{ 标签: [ "x", "A", "B" ] });

如果我删除 ng-repeat，它虽然可以工作(单图)——所以 dygraphs-code 是有效的.当然，像我在这里所做的那样直接在视图中绘制图形是没有意义的，我仍然想知道为什么它不起作用.我在这里遗漏了一些一般性观点吗?

解决方案

你的问题是 Angular 会重复你的

n 次.所以你现在有 n 次 div，id 为 'graph'，它们是兄弟姐妹.因此，当您调用 document.getElementById('graph') 时，这不会很好地工作.

也就是说，我也不知道 ng-repeat 中的脚本标签如何工作，这似乎是一个非常奇怪的用例.

执行此操作的正确方法(与所有 DOM 相关操作一样)是使用指令.举个例子:

Javascript:

var myApp = angular.module('myApp',[]);myApp.controller('MyCtrl', function($scope) {$scope.graphs = [{数据: [ [1,10,100], [2,20,80], [3,50,60], [4,70,80] ],选项:{标签:[x"，A"，B"]}},{数据: [ [1,10,200], [2,20,42], [3,50,10], [4,70,30] ],选项:{标签:[标签1"，C"，D"]}}];});myApp.directive('graph', function() {返回 {限制:'E'，//用作元素scope: {//隔离作用域data: '=',//双向绑定数据到本地作用域选择:'=?'//'?'意味着可选},template: "<div></div>",//我们需要一个 div 来附加图形链接:功能(范围，元素，属性){var graph = new Dygraph(elem.children()[0], scope.data, scope.opts );}};});

HTML:

<graph ng-repeat="graph in graphs" data="graph.data" opts="graph.opts"></graph>

JSFiddle

希望这有帮助！

I'm new to AngularJS and building a dashboard with dygraphs.

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>

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?

解决方案

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.

That said, I don't know how well script tags inside ng-repeat works either, seems like a very strange use case.

The proper way to do this (as with all DOM related operations), is to use a directive. Here's an example:

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>

JSFiddle

Hope this helps!

这篇关于Dygraphs 不适用于 ng-repeat的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！