Dygraphs不適用於ng-repeat

我是AngularJS的新手，並且使用dygraphs構建儀表板。Dygraphs不適用於ng-repeat

試圖將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是有效的。當然，像我這樣在視圖中直接繪製圖形是沒有意義的，但我仍然想知道爲什麼它不起作用。我在這裏錯過了一些一般性觀點嗎？

來源

2014-01-30 user3255061

您的問題是Angular會重複您的<div id="graph"> n次。所以你現在有n倍div和'圖'的id是兄弟姐妹。因此，當您撥打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

希望這有助於！

來源

2014-01-30 22:38:05 SveinT

非常感謝，這使得我的指示更加清晰，並完成了工作！ – user3255061

不錯的答案，我發現一個小問題，同時處理這個問題是我看不到找到一種方法來指定一個div用於標籤。有關如何添加它的任何想法？由於標籤DIV需要使用ID在數據中指定，所以我無法找到解決方法:( –

我假設你指的是'labelsDiv'。根據文檔，你也可以傳入一個元素。你添加一個你希望標籤出現在你指定的模板中的div，所以你將有兩個兄弟div，一個用於圖形本身，另一個用於標籤，然後你提取兩個元素，然後注入標籤元素對您提供給dygraph的數據的引用，以及您之前提供給dygraph構造函數的圖元素，請告訴我這是否合理。 – SveinT

Dygraphs不適用於ng-repeat

回答

相關問題