來自指令控制器內部服務的Http調用

Question

我正在構建一個Angular指令來加載從中傳遞一些變量的Highchart.js面積圖。

我正在使用這樣的指令

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

我試圖通過指令本身傳遞帶有json數據的url，通過服務進行http調用，然后使用指令本身內部的數據來構建圖形。

在下面，您可以看到我為服務和指令編寫的代碼。 在指令控制器中，在服務調用之后，我將$ scope發送到控制台，然后再發送$ scope.data。

我不明白的是，當我輸出$ scope時，我里面有一個數據數組，里面充滿了我的數據。 在下一行輸出$ scope.data本身，它給我“未定義”。

你知道為什么嗎？

 //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時，$ scope沒有它，因為dataService未完成請求，請嘗試在.then中訪問$ scope.data：

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

UPDATE

也許用$ watch試試吧？

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