1

私がやろうとしているのは、ユーザーがボタンをクリックしたときに、新しいハイチャート要素をページに追加したいということです。現在、チャートのコンテナは表示されますが、チャートは表示されません。

これが私がやろうとしていることです:

//This config works when I statically load a graph
$scope.someConfig ={ options: {chart:{type:'pie'}}, title :{text: 'Test'}, series:[{data: [1,2,3,4]}]} 

angular.element($('myElement')).append{
"<div class='myContainerClass'>"+
  "<highchart config='config' style='height: 100%; width: 100%'>"+"<\highchart>"+
"</div>"
);

私はまだこれにかなり慣れていないので、何が間違っているのか疑問に思っています

どんなアドバイスも素晴らしいでしょう！

ありがとう〜

4

1 に答える 1

2

目的の要素に追加する前に、APIcompileを使用してその DOMにアクセスする必要があります。service は、 のような括弧内に指定されたスコープで、その DOM でバインディングを機能させます。$compile$compile($scope)

コード

var compiledDOM = $compile("<div class='myContainerClass'>"+
  "<highchart config='config' style='height: 100%; width: 100%'>"+"<\highchart>"+
"</div>")($scope)
angular.element($('myElement')).append(compiledDOM)

ng-repeatDOM を追加するのではなく、提供された配列に基づいて DOM を動的にレンダリングするディレクティブを考えることもできます。基本的に、その配列の長さに達するまで、その html をレンダリングします。

したがって、ここでは、charts基本的に配列であるオブジェクトを埋めることができます。chartユーザーが新しいプッシュ 1 オブジェクトをchartsオブジェクトに追加するとconfig、次のようになります。charts.push({config: configObject})

<div ng-repeat="chart in charts" class='myContainerClass'>"+
      <highchart config='chart.config' style='height: 100%; width: 100%'><\highchart>
</div>

DOMshowHighChartの表示と非表示にフラグを切り替えます。highcharts

于 2015-10-28T20:03:41.567 に答える