1

所以我想要做的是当用户单击一个按钮时，我想向页面添加一个新的 highchart 元素。目前我看到我的图表容器出现了，但图表没有。

这是我正在尝试做的事情：

//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

在将其附加到所需的元素之前，您需要compile使用 API 到该 DOM 。服务将使绑定在该 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)

除了附加 DOM，您还可以考虑ng-repeat根据提供给它的数组动态呈现 DOM 的指令。基本上它会呈现该 html，直到达到该数组长度。

因此，在您的情况下，您可以填充charts基本上是数组的对象。当用户向对象添加新的chart推送一个对象时，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>

切换标志showHighChart以显示和隐藏highchartsDOM。

于 2015-10-28T20:03:41.567 回答