-カップルを解除し、私は2つのモデルを持っている

Question

をhighchartsが-ngの依存性注入を行う方法：iposectors、およびipomarketcap、パラメータに応じて、モデルのインスタンスを作成します工場、およびBindingCodeをすべてを結びつける モデルにはテスト用のハードコードデータがありますが、APIからデータを取得する予定です。 ここはフィドルです：highchartsです。

何も表示されません... デバッガ行の場合 - ハイチャートオブジェクトが作成され、すべてのデータが添付されていますが、デフォルトのタイトルのみが表示されます。 私は何が欠けていますか？

 var myapp = angular.module('myApp', ["highcharts-ng"]); 
    myapp.controller('myctrl', BindingCode); 
    myapp.factory("Factory", Factory); 

    function iposectors() { 
     this.charttitle = "Sector Distribution"; 
     this.apidata = [ 
      ['APP Android', 45.0], 
      ['APP Ios', 26.8], 
      ['Widget Web', 12.8], 
      ['MTC BAckoffice', 8.5], 
      ['Correo electrónico', 6.2], 
      ['Facebook', 6.2], 
      ['Twitter', 6.2], 
      ['Teléfono', 6.2], 
      ['Presencial', 6.2], 
     ]; 
     this.chartConfig = { 
      options: { 
       chart: { 
        type: 'pie' 
       }, 
       plotOptions: { 
        pie: { 
         dataLabels: { 
          enabled: false 
         } 
        } 
       }, 
       legend: { 
        enabled: true, 
        layout: 'vertical', 
        align: 'left', 
        height: 135, 
        width: 160, 
        verticalAlign: 'middle', 
        useHTML: true, 
        labelFormatter: function() { 
         return '<div style="text-align: left; width:120px;float:left;">' + this.name + ' ' + this.percentage.toFixed(1) + '%</div>'; 
        }, 
        itemStyle: { 
         color: '#421C40', 
         fontWeight: 'bold', 
         fontFamily: 'Century Gothic', 
         fontSize: '10px' 
        } 
       }, 
       tooltip: { 
        pointFormat: '<span style="color:{point.color}">\u25CF</span> Weight: <b>{point.percentage:.1f}%</b>' 
       }, 
      }, 
      title: { 
       text: this.charttitle, 
       align: 'center', 
       verticalAlign: 'top' 
      }, 
      series: [{ 
       name: 'Weight', 
       size: '75%', 
       showInLegend: true, 
       data: this.apidata 
      }], 
      loading: false 
     } 
    } 

    function ipomarketcap() { 
     this.charttitle = "Market Cap Distribution"; 
     this.apidata = [ 
      ['MC APP Android', 45.0], 
      ['MC APP Ios', 26.8], 
      ['MC Widget Web', 12.8], 
      ['MC MTC BAckoffice', 8.5], 
      ['MC Correo electrónico', 6.2], 
      ['MC Facebook', 6.2], 
      ['MC Twitter', 6.2], 
      ['MC Teléfono', 6.2], 
      ['MC Presencial', 6.2], 
     ]; 
     this.chartConfig = { 
      options: { 
       chart: { 
        type: 'pie' 
       }, 
       plotOptions: { 
        pie: { 
         dataLabels: { 
          enabled: false 
         } 
        } 
       }, 
       legend: { 
        enabled: true, 
        layout: 'vertical', 
        align: 'left', 
        height: 135, 
        width: 160, 
        verticalAlign: 'middle', 
        useHTML: true, 
        labelFormatter: function() { 
         return '<div style="text-align: left; width:120px;float:left;">' + this.name + ' ' + this.percentage.toFixed(1) + '%</div>'; 
        }, 
        itemStyle: { 
         color: '#421C40', 
         fontWeight: 'bold', 
         fontFamily: 'Century Gothic', 
         fontSize: '10px' 
        } 
       }, 
       tooltip: { 
        pointFormat: '<span style="color:{point.color}">\u25CF</span> Weight: <b>{point.percentage:.1f}%</b>' 
       }, 
      }, 
      title: { 
       text: this.charttitle, 
       align: 'center', 
       verticalAlign: 'top' 
      }, 
      series: [{ 
       name: 'Weight', 
       size: '75%', 
       showInLegend: true, 
       data: this.apidata 
      }], 
      loading: false 
     } 
    } 

    function BindingCode($scope, Factory) { 

     $scope.iposectors = Factory.CreatePieChart('iposectors'); 
     debugger; 
    } 

    function Factory() { 
     return { 
      CreatePieChart: function (type) { 
       if (type == 'iposectors') { 
        return new iposectors(); 
       } 
       else { 
        return new ipomarketcap(); 
       } 
      } 
     } 
    } 

htmlページ

<div ng-app="myApp"> 
     <div ng-controller="myctrl"> 
      @*<highchart id="chart1" config="highchartsNG"></highchart>*@ 
      <highchart id="chart1" config="chartConfig" class="span9"></highchart> 
     </div> 
    </div> 

Answer 1

問題はhighcharts-ngのは$scope変数に設定を期待しながら、あなたのデータは、iposectorsプロパティにバインドされていることです。

function BindingCode($scope, Factory) { 

    $scope.iposectors = Factory.CreatePieChart('iposectors'); 
    $scope.chartConfig = $scope.iposectors.chartConfig; 

} 

ライブデモ：たとえば、あなたが、これはこの方法を参照するバインドできhttp://jsfiddle.net/fjv93vvu/