Apologies for any language errors. I am facing an issue with AngularJS. When making an HTTP POST request, I receive data from MySQL in JSON format.
app.controller('DeviceActivityCtrl', function ($scope, $rootScope, $location, $http, Data,$stateParams,DeviceActivityResult) {
//$scope.foodDistribution=null;
if (DeviceActivityResult.status == "success") {
$scope.deviceActivityLog = DeviceActivityResult;
$scope.authError = 'Correct';
alert(DeviceActivityResult.data[0].steps);
}
else {
$scope.authError = 'notsuccess';
}
});
The problem arises when the view (HTML) is loaded before the HTTP request is completed, causing the HTML to fail to load as the data is not yet ready. How can I delay the loading of the view (HTML) until the JSON data retrieval process is complete? Thank you for your assistance.
<div class="inline">
<div ui-jq="easyPieChart" ui-options="{
percent: ({{deviceActivityLog.data[0].activity_time}}/340)*100,
lineWidth: 10,
trackColor: '{{app.color.light}}',
barColor: '{{app.color.success}}',
scaleColor: '{{app.color.light}}',
size: 188,
lineCap: 'butt'
}">
<div>
<span class="h2 m-l-sm step">{{(deviceActivityLog.data[0].activity_time/340)*100|number:0}}</span>%
<div class="text text-sm"></div>
</div>
</div>
</div>
----------------state---------------
.state('report.food', {
url: '/{userid:[0-9]{1,4}}',
templateUrl: 'tpl/report_food.html',
controller: 'DeviceActivityCtrl',
resolve: {
deps: ['$ocLazyLoad',
function ($ocLazyLoad) {
return $ocLazyLoad.load('ui.grid').then(
function () {
return $ocLazyLoad.load('js/app/report/reportFood.js','UiGridDemoCtrl.resolve');
}
);
},
],
DeviceActivityResult: function(Data, $stateParams) {
return Data.post('deviceActivity',
{userid: $stateParams.userid}
);
}
}
})