単一のコントローラ内の複数の同じディレクティブ

Question

ハイチャートを使用して一部のデータを視覚化するWebページを構築しています。 それは再利用可能にするために、私は私が指示私のコントローラで

'use strict'; 
angular.module('statisticsApp') 
    .directive('cleanbarchart', function() { 
    scope:{ 
     localdata:'@' 
    } 
    return { 
     template: '<div></div>', 
     restrict: 'E', 
     link: function postLink(scope, element, iAttrs) { 
      // console.log(iAttrs); 
      // console.log(iAttrs); 
      // var attrs = JSON.parse(iAttrs.id); 
      var attrs = iAttrs; 
      element.highcharts({ 
      chart: { 
       type: 'column', 
       width:1000, 
       zoomType: 'x' 
      }, 
      title: { 
       text: scope.localdata[attrs.id].title //title 
      }, 
      xAxis: { 
       categories: scope.localdata[attrs.id].categories, crosshair: true 

      }, 
      yAxis: { 
       min: 0 
      }, 
      tooltip: { 
    //   headerFormat: '<span style="font-size:10px">{point.key}</span><table>', 
    //   pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + 
    //   '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>', 
    //   footerFormat: '</table>', 
    //   shared: true, 
    //   useHTML: true 
      }, 
      plotOptions: { 
    //   column: { 
    //   pointPadding: 0.2, 
    //   borderWidth: 0 
    //   } 
      }, 

      series: scope.localdata[attrs.id].series 
      }) 
     } 
    }; 
    }); 

にしたいチャートを包みましたが、私はのlocalDataにと

angular.module('statisticsApp') 
    .controller('AboutCtrl', function ($scope, HttpDataService) { 

    function done(data){ 

     console.log(data); 
     $scope.localdata['test2'] = data; //HttpDataService.getUniqueUsers() ; 
    } 

    $scope.localdata = {} ; 
    HttpDataService.getUniqueUsers(done) ; 
}); 

を移入するサービスとコールバック関数を使用しますこのようになりますサービス：

angular.module('statisticsApp') 
    .service('HttpDataService', function($http, $q, baseRestPath) { 
    // AngularJS will instantiate a singleton by calling "new" on this function 
    return { 
     getUniqueUsers: function (callback, periodicity) { 
     var url = baseRestPath + '/sessions/uniqueUsers'; 
     console.log(url); 
     var dates = []; 
     var values = []; 

     $http.get(url).then(
      function successCallback(response){ 
      var data = response.data; 
      data.forEach(function(dataLine) { 
       dates.push(dataLine[1]); 
       values.push(dataLine[0]); 
      }) 
      console.log(values); 
      callback({title: 'Unique Users', categories:dates, 'series': [ {name: 'Alltime', data:values} ] }); 
     // return {'title': "Unique Users", 'categories':dates, 'series': [ {name: "Alltime", data:values} ] } 
      },function errorCallBack(response){ 
      //do nothing 
      } 
     ); 


//  return {'title': "Unique Users", 'categories':dates, 'series': [ {name: "Alltime", data:values} ] } 
     } 
    } 
    }); 

そして最後に、私のhtmlで私はディレクティブ

を呼び出すために、次のコードを使用します私はそれがあると思い、私は私のサービスが動作することを確信している、と正しくデータを返しながら、私はエラー

プロパティを読み取ることができません取得

<cleanbarchart id="test2"></cleanbarchart> 

未定義

の「タイトル」 $ httpが動作する非同期的なやり方とは関係がありますが、scope.localdataまたはscope.localdata [attrs.id]でディレクティブを監視する方法を理解できません。これは、element.highchartsをウォッチブロック

link: function postLink(scope, element, iAttrs) { 
    scope.$watch('localdata',function(){ 
    element.highcharts..... 
    } 
} 

or 

link: function postLink(scope, element, iAttrs) { 
    scope.$watch('localdata[' + attrs.id + ']',function(){ 
    element.highcharts..... 
    } 
} 

すべてのヘルプは、あなたの代わりにあなたのサービスへのコールバックを渡す約束を返すために、あなたのサービスを変更する必要が

Answer 1

Firstyを高く評価しました。 $httpdocumentationを開くと、$http.getは後で解決できるHttpPromiseオブジェクトを返します。

これを実行した後、データの代わりにディレクティブを約束することができます。

ので、代わりの：

$scope.localdata = {} ; 
HttpDataService.getUniqueUsers(done) ; 

に変更：

$scope.localdataPromise = HttpDataService.getUniqueUsers(); 

以降ディレクティブでそのようにそれを解決：

scope.localdataPromise.then(function (data) { /* resolve data and draw chart */ });