angularjs - dygraphs无法与ng-repeat一起使用

我是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代码是有效的。当然，像我在这里那样直接在视图中绘制图形没有任何意义，但我仍然想知道为什么它不起作用。我是否在这里缺少一些要点？

最佳答案

您的问题是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,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

希望这可以帮助！

关于angularjs - dygraphs无法与ng-repeat一起使用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21468244/

DyGraphs

angularjs - dygraphs无法与ng-repeat一起使用