如何在角度UI Accorion(uib-Accordion)中动态加载HighChart？

Question

我正在获取数据,但是我必须在ID的基础上将它们绑定到高图,如果我点击手风琴它应该显示基于ID的高图和表格,如下所示

这是我的代码

<uib-accordion close-others="oneAtATime">
   <uib-accordion-group is-open="isopen" ng-init="isOpen = $first" class="acc-group" style="margin-bottom:0">
      <uib-accordion-heading ng-click="isopen=!isopen" class="header">
        <div><p class="boardRateHeading"><span style="color:#009688">{{board.city}}&nbsp;&nbsp;</span><span style="color:#607D8B;text-transform:uppercase;">{{board.name}}</span>&nbsp;&nbsp;<span>{{board.date | date:'MM/dd/yyyy'}}</span><span class="pull-right">?{{board.price}}(<span ng-style="{{changeColor(board.change)}}"><i class="{{getIcon(board.change)}}" aria-hidden="true"></i>{{board.change}}</span>)</span></p></div>
      </uib-accordion-heading>
      <div class="row" style="margin-top:15px;" ng-repeat="data in boardData">
         <div class="col-md-8">
           <div id="container{{data.id}}">
               <img class="img-responsive mrg-auto" src="/Content/images/loading.gif" />
           </div>
         </div>
         <div class="col-md-4">
            <table class="table table-bordered table-condesed">
               <thead>
                  <tr>
                    <td>Date</td>
                     <td>In ?</td>
                  </tr>
               </thead>
               <tbody>
                <tr>
                  <td>{{data.date | date:'MM/dd/yyyy'}}</td>
                  <td>?{{data.price}}({{board.change}})</td>
                </tr>
              </tbody>
            </table>
          </div>
         </div>
       </uib-accordion-group>
  </uib-accordion>

和控制器

           $http({
                method: "GET",
                url: "/api/Board/getMapdataOnId",
                params: {
                    id: parseInt(id)
                }
            }).then(function (response) {
                var boardData = response.data;
                var dateData = [],
                  rateData = [];
                for (var i = 0; i < boardData.gData.length; i++) {
                    dateData.push(Date.parse(boardData.gData[i].date));
                    rateData.push(boardData.gData[i].maxRate);
                }
                Highcharts.chart('container' + parseInt(id), {
                    chart: {
                        zoomType: 'x'
                    },
                    title: {
                        text: ''
                    },
                    subtitle: {
                        text: document.ontouchstart === undefined ?
                          'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
                    },
                    credits: {
                        enabled: false
                    },
                    xAxis: {
                        categories: dateData,
                        type: 'datetime',
                        labels: {
                            autoRotation: [-90],
                            formatter: function () {
                                return Highcharts.dateFormat('%b', this.value) + ', ' + Highcharts.dateFormat('%d', this.value);
                            }
                        },
                        title: {
                            text: 'Date'
                        }
                    },
                    yAxis: {
                        allowDecimals: true,
                        gridLineWidth: 1,
                        labels: {
                            formatter: function () {
                                return this.value;
                            }
                        },
                        //       minorTickInterval: 1,
                        title: {
                            text: 'Price in ' + boardData.gData[0].currency
                        }
                    },
                    tooltip: {
                        formatter: function () {
                            return '<b>Rates on </b><br/>' +
                              Highcharts.dateFormat('%b', this.x) + ', ' + Highcharts.dateFormat('%d', this.x) + '  <br/>' + boardData.gData[0].currency + '' + this.y;
                        }
                    },
                    plotOptions: {
                        area: {
                            fillColor: {
                                linearGradient: {
                                    x1: 0,
                                    y1: 0,
                                    x2: 0,
                                    y2: 1
                                },
                                stops: [
                                  [0, Highcharts.getOptions().colors[0]],
                                  [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                                ]
                            },
                            marker: {
                                radius: 2
                            },
                            lineWidth: 1,
                            states: {
                                hover: {
                                    lineWidth: 1
                                }
                            },
                            threshold: null
                        }
                    },
                    series: [{
                        data: rateData,
                        type: 'area',
                        showInLegend: false
                    }]
                });
            }, function (response) {
                console.log(response.statusText);
            });

Answer 1

不应该像这样通过ng-click传递数据

<uib-accordion-heading ng-click="open({{data.id}})" class="header">

然后在开放功能,

function open(id) {
    $http({ ..... });
}