Http-Aufruf von einem Dienst innerhalb eines Direktiven-Controllers

Question

Ich baue eine Angular-Direktive, um ein Highchart.js-Bereichsdiagramm zu laden und einige Variablen davon zu übergeben.

Ich verwende die Richtlinie wie diese

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

Ich versuche, die URL mit den JSON-Daten aus der Richtlinie selbst zu übergeben, machen den HTTP-Aufruf über einen Dienst und dann die Daten in der Richtlinie selbst verwenden um das Diagramm zu erstellen.

Unten sehen Sie den Code, den ich für den Dienst und die Richtlinie geschrieben habe. In der Richtlinie Controller, nach dem Service-Aufruf sende ich den $ -Scope an die Konsole und dann sende ich die $ scope.data.

Was ich nicht verstehe, ist, wenn ich den $ scope ausgibt, habe ich das Datenarray darin, gefüllt mit meinen Daten. In der nächsten Zeile gib die $ scope.data selbst aus und es gibt mir "undefined".

Haben Sie eine Ahnung, warum?

//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

Schauen Sie hier:

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

Wenn Sie versuchen, scope.data $ zu drucken, wird $ Umfang es nicht, weil Data nicht Anfrage abgeschlossen ist, versuchen $ scope.data zu den acces innen .then:

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

UPDATE

dies vielleicht mit $ wa versuchen tch?

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