今早發現，directive寫的echarts元件，雖然能夠獲取到Controller中的資料，但是當我使用$http請求到的資料，想傳到directive卻總是獲取不到，知道這是非同步問題，圖表載入後，資料才請求到，所以圖表載入不了資料

解決方法

使用ng-if,判斷，如果有資料才顯示，完美解決

<realtem-data ng-if="data" id="temdata" legend="legend" item="item" data="data"></realtem-data>

其餘程式碼

controller程式碼

app.controller("temdataCtrl", function($scope, $http, $log) {
    $http({
        method: "get",
        url: "http://..:3000/tem",
        headers: {
            "content-type": "application/json"
        }
    }).then(function(req) {
        // console.log(req.data)
        $scope.data = req.data
    })
})

directive程式碼

 app.directive('realtemData', function() {
     return {
         scope: {
             id: "@",
             data: "="
         },
         restrict: 'E',
         template: '<div class="real-data-charts"></div>',
         replace: true,
         link: function($scope, element, attrs, controller) {
             var option = {
                 color: ['#CD3700'],
                 tooltip: {
                     trigger: 'axis',
                     axisPointer: { // 座標軸指示器，座標軸觸發有效
                         type: 'shadow' // 預設為直線，可選為：'line' | 'shadow'
                     }
                 },
                 legend: {
                     data: ['溫度'],
                 },
                 label: {
                     normal: {
                         show: true
                     }
                 },
                 grid: {
                     left: '3%',
                     right: '4%',
                     bottom: '3%',
                     containLabel: true
                 },
                 xAxis: [{
                     type: 'category',
                     data: [1, 2, 3, 4, 5],
                     axisTick: {
                         alignWithLabel: true
                     }
                 }],
                 yAxis: [{
                     type: 'value'
                 }],
                 series: [{
                     name: '溫度',
                     type: 'line',
                     barWidth: '60%',
                     data: $scope.data
                 }]
             };
             var myChart = echarts.init(document.getElementById($scope.id), 'macarons');
             myChart.setOption(option);
         }
     };
 });

圖片.png

注意
發現如果多個資料的話，可能這麼操作會導致圖表上只有一個資料顯示
所以我把所有的資料都放到一個物件中，然後ng-if只判斷這個物件即可