2

私は AngularJS を初めて使用し、その機能セットは気に入っていますが、学習曲線は急勾配でした。現在、mySQL サーバーから返されたデータに基づいて SVG グラフを生成する作業を行っています (もちろん JSON オブジェクトとして)。他のスタックオーバーフローの投稿の助けを借りて、Angular がパス ポイントをバインドする前に SVG がパス ポイントをレンダリングしようとすることに基づくエラーを克服しました (「ポイント」と「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 形式で各反復をテンプレートに添付するにはどうすればよいですか?

4

1 に答える 1

0

反復中にローカル変数「ポイント」に実際の各要素があるため、$index は必要ありません。また、属性 cx および cy に ng-prefix を使用しないでください。代わりに、すべてを生の HTML として扱い、angular {{ }} 構文のみを使用してください。

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

ここでプランカーを参照してください: http://plnkr.co/edit/zzXiAEaRsnst3Fuvs1IF?p=preview

于 2013-07-09T19:32:25.533 に答える