Получение данных в директиву AngularJS для D3.js в приложении Mean.js

Question

Я пытаюсь интегрировать D3.js в модуль crud A Mean.js. Приведенный здесь пример https://www.sitepoint.com/creating-charting-directives-using-angularjs-d3-js/ работает нормально, если я удаляю стандартный список-контроллер, который означает, что.js создает, и заменяет его примерами жестко закодированных данных в примере контроллера.

Я понятия не имею, как интегрировать реальные данные из базы данных с директивой D3. Должен ли я вводить модуль службы?
Кстати, я использую версию 0.4.2 Mean.js

Это стандартный контроллер списка Meanjs.

(function () {
  'use strict';

 angular
.module('charts')
.controller('ChartsListController', ChartsListController);

ChartsListController.$inject = ['ChartsService', '$scope'];

function ChartsListController(ChartsService, $scope) {
var vm = this;

vm.charts = ChartsService.query();

}

})();

Это директива D3

(function () {
  'use strict';

   angular
   .module('charts')
   .directive('linearChart', linearChart);

   linearChart.$inject = [ '$window'];

  function linearChart($window) {

    return{
      transclude:true,
      restrict: 'EA',
      template: '<svg width='850' height='200'></svg>',
       link: function postLink(scope, elem, attrs){                          
       var salesDataToPlot=scope[attrs.chartData];
        var padding = 20;
        var pathClass='path';
        var xScale, yScale, xAxisGen, yAxisGen, lineFun;

        var d3 = $window.d3;
        var rawSvg=elem.find('svg');
        var svg = d3.select(rawSvg[0]);


        function setChartParameters(){

      xScale = d3.scale.linear()
         .domain([chartData[0].hour, chartData[chartData.length-1].hour])
         .range([padding + 5, rawSvg.attr('width') - padding]);

      yScale = d3.scale.linear()
         .domain([0, d3.max(chartData, function (d) {
           return d.sales;
         })])
         .range([rawSvg.attr('height') - padding, 0]);

      xAxisGen = d3.svg.axis()
         .scale(xScale)
         .orient('bottom')
         .ticks(chartData.length - 1);

      yAxisGen = d3.svg.axis()
         .scale(yScale)
         .orient('left')
         .ticks(5);

      lineFun = d3.svg.line()
         .x(function (d) {
           return xScale(d.hour);

         })
         .y(function (d) {
           return yScale(d.sales);
         })
         .interpolate('basis');
    }

    function drawLineChart() {

      setChartParameters();

      svg.append('svg:g')
         .attr('class', 'x axis')
         .attr('transform', 'translate(0,180)')
         .call(xAxisGen);

      svg.append('svg:g')
         .attr('class', 'y axis')
         .attr('transform', 'translate(20,0)')
         .call(yAxisGen);

      svg.append('svg:path')
         .attr({
           d: lineFun(chartData),
           'stroke': 'blue',
           'stroke-width': 2,
           'fill': 'none',
           'class': pathClass
         });
    }

    drawLineChart();
  }
    };
  }
})();

Это директива <div linear-chart chart-data="salesData"></div>

Answer 1

В отсутствие лучшей идеи я использовал это.. Директива оказывается перед тем, как обещание будет выполнено

Директива выглядит следующим образом..

    angular
.module('lightsensors')
.directive('lightChart', lightChart);

lightChart.$inject = ['$window'];

function lightChart($window) {

return{
  restrict:'EA',
  template:'<svg width="950" height="350"></svg>',
  link: function link(scope, elem, attrs){

    console.log(scope.vm.lightsensors[0].payload.value);

    var data = scope.vm.lightsensors;
    var padding= 20;
    var pathClass='path';
    var xScale, yScale, lineFun;

    var d3 = $window.d3;
    var rawSvg=elem.find('svg');
    var svg =d3.select(rawSvg[0]);


    function setChartParameters(){

      xScale = d3.scaleLinear()
      .domain([
        d3.min(data,function(d){
          return d.payload.timestamp;
        }), 
        d3.max(data, function(d){
          return d.payload.timestamp;
        })])
      .range ([padding + 5, rawSvg.attr('width') - padding]);

      yScale = d3.scaleLinear()
        .domain([0,d3.max(data, function(d){
          return d.payload.value;
        })])
        .range([rawSvg.attr('height') -padding, 0]);

      lineFun = d3.line()
        .x(function(d){
          return xScale(d.payload.timestamp);
        })
        .y(function(d){
          return yScale(d.payload.value);
        });
    }

    function drawLineChart() {

      setChartParameters();

      svg.append('svg:g')
          .attr('transform', 'translate(0,330)')
          .call(d3.axisBottom(xScale));

      svg.append('svg:g')
          .attr('transform', 'translate(20,0)')
          .call(d3.axisLeft(yScale));

      svg.append('svg:path')
          .data([data])
          .attr('class', pathClass)
          .attr('d', lineFun);
    }

    drawLineChart();

  }

};
}
})();

Это HTML

  <div ng-if="vm.lightsensors.$resolved">
  <div light-chart></div>
  </div>