Mahmoud Gamal Mahmoud Gamal - 13 days ago 5
AngularJS Question

Scope not updating UI inside the success function of http.get

I want to integrate the same high chart as in this link with Restful API using the

$http.get
, it doesn't work because of the
$scope.pieData
is in the success function:

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


Here is the JSFiddle link (It will not work, because of the service link).

Anyone could help please.

Answer

Jimmy is right, your problem is the chart renders and after that the success function get the response

to prevent that you have to create flag and use ng-if, so the html will be like that

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

and the JS will be like that:-

$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

              });
Comments