如何消除由於svg圈引起的angularjs錯誤？

我是AngularJS的新手，雖然我喜歡它的功能集，但它的學習曲線一直很陡峭。目前，我正在根據從mySQL服務器返回的數據（當然是JSON對象）生成SVG圖。在其他stackoverflow文章的幫助下，我已經克服了基於SVG嘗試在Angular綁定它們之前呈現路徑點的錯誤（'點'與'ng點'）的錯誤。但是，我遇到了另一個涉及Angular的迭代限制的問題，當使用ng-repeat時。如何消除由於svg圈引起的angularjs錯誤？

我的圖形與Google Analytics類似：每個點有一對多邊形和一系列圓圈。以下是模板。因爲這會引發10 $ digest（）迭代錯誤。它可以直觀地工作，但控制檯顯示錯誤。

<svg width="100%" height="300" style="overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <rect x="0" y="0" width="100%" height="100%" fill="rgb(245,245,245)" /> 
    <polygon fill="#ddf" ng-points="{{line}}" /> 
    <polyline fill="none" stroke="#bbe" stroke-width="3" ng-points="{{line}}" /> 

    <g ng-repeat="point in xy"> 
    <circle ng-cx="{{xy[$index][0]}}" ng-cy="{{xy[$index][1]}}" r="5" /> 
    </g> 
</svg>

每個點的數據都從mySQL中提取出來並用控制器方法進行格式化。 {{line}}是以字符串形式表示的點。 {{xy}}是作爲一個數組/對象（我嘗試使用這兩個）的嵌套數組來匹配SVG圓圈的cx/cy格式。

xy = [["0","300"],["100","130"],["200","109"], ...]

我的想法是，我需要建立的每個圓圈指令中，然後將其連接到元素（或編譯？），但是當我嘗試從一個鏈接中訪問數組或編譯的是當我有麻煩。數組（或對象）存在，我可以用console.log打開它，但是試圖從指令中鑽入並開始獲取空字符串。因此，這裏的指令，我試圖用

directives.ngGraph = function() { 
    return { 
    restrict: 'A', 
    scope: { 
     line: "=", 
     xy: "=" 
    }, 
    replace: true, 
    templateUrl: 'partials/graph.html', 
    link: function(scope, attrs) { 
     console.log(scope.xy) 
    } 
    }; 
};

在上述情況下的狀態，記錄scope.xy返回按預期的方式排列，而是會在登錄scope.xy [0]會返回一個空字符串：「」。

所以我的問題是：我如何循環訪問屬性中鏈接的嵌套數組，並將每次迭代附加到循環需要的cx/cy格式的模板中？

來源

2013-05-27 iamsar

您不需要$ index，因爲您在迭代過程中在本地變量「point」中有每個實際元素。另外，不要使用NG-前綴屬性Cx和Cy，而是把它作爲所有原始的HTML和只使用角度{{}}語法：

<g ng-repeat="point in xy"> 
    <circle cx="{{point[0]}}" cy="{{point[1]}}" r="5" /> 
</g>

見plunker這裏：http://plnkr.co/edit/zzXiAEaRsnst3Fuvs1IF?p=preview

來源

2013-07-09 19:32:25 Ekus

如何消除由於svg圈引起的angularjs錯誤？

回答

相關問題