Question

我是AngularJS的新手，虽然我喜欢它的功能集，但它的学习曲线非常陡峭。目前我正在根据从mySQL服务器返回的数据（当然是作为JSON对象）生成SVG图。在其他stackoverflow帖子的帮助下，我已经克服了基于SVG尝试在Angular绑定它们之前渲染路径点的错误（'点'与'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)
    }
  };
};

在上面的场景中，日志记录scope.xy按预期返回一个数组，但是记录scope.xy [0]返回一个空字符串：“”。

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

Answer 1

您不需要$ index，因为在迭代期间您的局部变量中的每个实际元素都“指向”。另外，不要对属性cx和cy使用ng-prefix，而是将其全部视为原始HTML并仅使用angular {{}}语法：

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

请在此处查看plunker：http://plnkr.co/edit/zzXiAEaRsnst3Fuvs1IF?p=preview

如何消除svg圈引起的angularjs错误？

1 个答案: