Question

我想使用$http.get将与this link中相同的高图表与Restful API集成，但由于$scope.pieData位于成功函数中，因此无效：

app.directive('hcPieChart', function () {
                return {
                    restrict: 'E',
                    template: '<div></div>',
                    scope: {
                        title: '@',
                        data: '='
                    },
                    link: function (scope, element) {
                        Highcharts.chart(element[0], {
                            chart: {
                                type: 'pie'
                            },
                            title: {
                                text: scope.title
                            },
                            plotOptions: {
                                pie: {
                                    allowPointSelect: true,
                                    cursor: 'pointer',
                                    dataLabels: {
                                        enabled: true,
                                        format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                                    }
                                }
                            },
                            series: [{
                                data: scope.data
                            }]
                        });
                    }
                };
            })

app.controller('myCtrl', function($scope, $http) {

   $http({
              method: 'Get',
              url: 'http://localhost:2195/api/charts',    
          }).success(function(data, status , header, config) {

                // Sample data for pie chart   
                        $scope.pieData = [
                        {
                            name: "Sent SMSs",
                            selected: true,
                            y:  data[0].sentSMS
                        }, 
                        {
                            name: "Not Sent",
                            y: data[0].notSentSMS,
                            sliced: true,

                        }, 
                        {
                            name: "Delivered",
                            y: data[0].deliveredSMS
                        },
                        {
                            name: "Not Delivered",
                            y: data[0].notDeliveredSMS,

                            selected: false
                        }
                    ];          
          }                         

}); // End of Controller

这是JSFiddle link（由于服务链接，它不起作用）。

任何人都可以帮忙。

Answer 1

吉米是对的，你的问题是图表渲染，然后成功函数得到响应

防止你必须创建标志并使用ng-if，所以html就像那样

<hc-pie-chart  ng-if="flag" data = "pieData" title="Manual Campaigns" >Placeholder for Manual Campaigns pie chart</hc-pie-chart>

和JS将是这样的： -

$scope.flag = false;   

          $http.get("http://localhost:2195/api/charts")
              .then(function(response) {
                console.log(response);                  

                  $scope.pieData = [
                        {
                            name: "Sent SMSs",
                            selected: true,                            
                            y : response.data[0].sentSMS

                        }, 
                        {
                            name: "Not Sent",
                            y: response.data[0].notSentSMS,
                            sliced: true,

                        }, 
                        {
                            name: "Delivered",
                            y:response.data[0].delivered
                        },
                        {
                            name: "Not Delivered",
                            y: response.data[0].notDelivered,

                            selected: false
                        }
                    ]

                    console.log($scope.pieData);
                    $scope.flag = true;  //set the flag equal true to show it

              });

Answer 2

我编辑了你的小提琴：

<强>控制器

app.controller('myCtrl', function($scope, $http) {

  //Should live in service;
  var getData = function() {
    return $http.get('http://localhost:2195/api/charts')
      .then(function(response) {
        return response.data;
      });
  };

  getData().then(function(data) {

    $scope.pieData = [{
      name: "Sent SMSs",
      selected: true,
      y: response.data[0].autoSent

    }, {
      name: "Not Sent",
      y: response.data[0].notSent,
      sliced: true,

    }, {
      name: "Delivered",
      y: response.data[0].delivered
    }, {
      name: "Not Delivered",
      y: response.data[0].notDelivered,

      selected: false
    }];    

  });

}); // End of Controller

<强>指令

app.directive('hcPieChart', function() {
  return {
    restrict: 'E',
    template: '<div></div>',
    scope: {
      title: '@',
      data: '='
    },
    link: function(scope, element) {
      //Using a watch ensures that we can always access
      // data in the link function
      scope.$watch('data', function(newValue) {
        Highcharts.chart(element[0], {
          chart: {
            type: 'pie'
          },
          title: {
            text: scope.title
          },
          plotOptions: {
            pie: {
              allowPointSelect: true,
              cursor: 'pointer',
              dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %'
              }
            }
          },
          series: [{
            data: newValue
          }]
        });
      });
    }
  };
})

<强>模板

<div class="row" ng-if="pieData">

  <div class="col-md-6">
    <hc-pie-chart title="Manual Campaigns" data="pieData">Placeholder for Manual Campaigns pie chart</hc-pie-chart>
  </div>

  <div class="col-md-6">
    <hc-pie-chart title="Auto Campaigns">Placeholder for Auto Campaigns pie chart</hc-pie-chart>
  </div>

</div>

请注意，其中很多都违反了最佳做法。自1.1以来，Angular已经发生了很多变化。

范围不在http.get

2 个答案: