すべてのデータセットについてハイチャートを作成

Question

誰かがこの問題に遭遇してここに投稿したと確信していますが、見つけられませんでした。そのため、ごめんなさい。 データベースのすべてのデータセットのグラフが必要なダッシュボードを作成しています。

データをディレクティブに送信し、そのディレクティブに渡されたデータを使ってディレクティブのコントローラ内からグラフを描画してみました。

この部分図

<div class="row"> 
<div class="col col-md-9"> 
    <input type="text" class="form-control" ng-model="nameFilter" placeholder="Search for..."> 
</div> 
</div> 

<div class="row" ng-if="loading"> 
<div class="col col-md-6 col-md-offset-3"> 
    <img src="../img/loader.gif"/> 
</div> 
</div> 
<div class="row" ng-repeat="app in apps | filter: nameFilter"> 
    <app-card name="app.name" android="app.android" ios="app.ios" date="app.date"></app-card> 
</div> 

である部分は、ディレクティブ

var app = angular.module('app'); 

app.directive('appCard', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      name: '=name', 
      android: '=android', 
      ios: '=ios', 
      date: '=date' 
     }, 
     templateUrl: 'http://testsite.nl/dashboard/partials/directives/app-card.html' 
    }; 
}); 

ディレクティブテンプレート

<div class="panel panel-info app-card" ng-controller="appCardController"> 
    <div class="panel-heading"> 
     <div class="row"> 
      <h4 class="col col-md-5">{{name}}</h4> 


     </div> 
    </div> 
    <div class="panel-body"> 
     <div class="col col-md-12"> 
      <h3>Android downloads: {{android}}</h3> 
      <h3>iOS downloads: {{ios}}</h3> 
      <div id="container" style="min-width: 310px; height:250px; margin: 0 auto;"></div> 
     </div> 
    </div> 
</div> 

にデータを送信し、コントローラは、この

のように見えます

正しい名前と配列の値を持つディレクティブテンプレートが表示されますが、唯一の問題は、リスト内の最後の項目に属するグラフですが、最初のテンプレート。

どのようにしてすべてのテンプレートにデータに基づくグラフが含まれるようにすることができますか？

Answer 1

が、私はここに私のplunkerを参照してください、angular-chartの使用に関連した非常によく似た質問に答え：https://plnkr.co/edit/8fJ4u0U2fL4lYTioCbG0?p=preview

を質問/ここに答える：あなたが直面しているangular ng-repeat with directive

実際の問題は、IDがコンテナであるということです、そしてあなたDOMに重複した "id"属性を持つことはできないので、最初のものだけを見つけます。 「名前」を仮定し

がユニークで、それはディレクティブを使用するようにコントローラを変更Highchart.chartにscope.nameと<div id="container">が<div id="{{name}}"

になったので、この後のディレクティブのテンプレートを変更するには、ユニークなIDを持っている必要があり、それが動作します

希望は意味があります。