2

我是 AngularJS 的新手，虽然我喜欢它的功能集，但它的学习曲线很陡峭。目前，我正在根据从 mySQL 服务器返回的数据（当然作为 JSON 对象）生成 SVG 图。在其他 stackoverflow 帖子的帮助下，我克服了基于 SVG 尝试在 Angular 绑定路径点之前渲染路径点的错误（“points”与“ng-points”）。但是，在使用 ng-repeat 时，我遇到了另一个涉及 Angular 的 10 次迭代限制的问题。

我的图表类似于 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)
    }
  };
};

在上述场景中，logging scope.xy 按预期返回一个数组，但 logging scope.xy[0] 返回一个空字符串：“”。

所以我的问题是：如何遍历属性中链接的嵌套数组，并将每次迭代附加到圆圈所需的 cx/cy 格式的模板？

4

1 回答 1

0

You don't need $index, as you have each actual element in your local variable "point" during iteration. Also, don't use ng-prefix for the attributes cx and cy, instead treat it all as raw HTML and only use angular {{ }} syntax:

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

See plunker here: http://plnkr.co/edit/zzXiAEaRsnst3Fuvs1IF?p=preview

于 2013-07-09T19:32:25.533 回答