Http-вызов из службы внутри директивного контроллера

Question

Я создаю угловую директиву для загрузки графа области Highchart.js, передающего некоторые переменные из него.

Я использую директиву, как этот

<andamento-fondo-area-chart color="#3FAE2A" url="../data.json"></andamento-fondo-area-chart> 

Я пытаюсь передать URL с JSON данных из самой директивы, сделать вызов HTTP через службу, а затем использовать данные внутри самой директивы для построения графика.

Ниже вы можете увидеть код, который я написал для службы и директивы. В контроллере директивы после вызова службы я отправляю $ scope на консоль, а затем отправляю $ scope.data.

То, что я не понимаю, это когда я выдаю $ scope, у меня есть массив данных внутри него, заполненный моими данными. На следующей строке выводится сама $ scope.data, и она дает мне "undefined".

У вас есть какие-либо идеи, почему?

//Service 
    OLS.service('dataService', function($http) { 
     delete $http.defaults.headers.common['X-Requested-With']; 
     this.getData = function(url) { 
      return $http({ 
       url: url 
      }); 
     } 
    }); 

//Graph Directive using Highchart 

OLS.directive('andamentoFondoAreaChart', function($http, dataService){ 
    return { 
     restrict: 'E', 
     template: '<div id="areaGraphContainer" style="width:100%;"></div>', 
     scope: { 
      url: '@', 
      color: '@' 
     }, 
     controller: function($scope){  
      dataService.getData($scope.url).then(function(dataResponse) { 
       $scope.data = dataResponse; 
      }); 
      console.log($scope); 
      console.log($scope.data);   
     }, 
     link: function (scope, element, attrs) {   
      Highcharts.chart('areaGraphContainer', { 
       chart: { 
        type: 'area', 
        ... 
       }, 
       title.: { 
        ... 
       }, 
       ..., 
       series: [{ 
        color: scope.color, 
        ..., 
        data: scope.data 
       }] 
      }); 
     } 
    }; 
}); 

Answer 1

Посмотрите здесь:

dataService.getData($scope.url).then(function(dataResponse) { 
      $scope.data = dataResponse; 
     }); 
console.log($scope); 
console.log($scope.data);   

При попытке напечатать $ scope.data, $ сфера не имеет, потому что DATASERVICE не завершен запрос, попробуйте Acces $ scope.data внутри .then:

dataService.getData($scope.url).then(function(dataResponse) { 
      $scope.data = dataResponse; 
      console.log($scope.data); 
     }); 

UPDATE

Может попробовать это с $ пром чик?

link: function (scope, element, attrs) { 
     scope.$watch('data', function(newVal) { 
     if(newVal) { Highcharts.chart('areaGraphContainer', ...);} 
    }, true);