Attempting to maintain real-time updates on an Angular page by polling a REST service hosted locally and updating the array with new content is crucial. The code snippet below demonstrates this:
JS
angular.module("WIMT").controller('overviewController', function ($scope,$interval,$http){
var reg = this;
var promise;
reg.teacherInfoList = [];
reg.dayfilter = "";
$scope.start = function() {
$scope.stop();
promise = $interval( $scope.longPolling, 3000);
};
$scope.stop = function() {
$interval.cancel(promise);
};
$scope.longPolling = function(){
reg.teacherInfoList.length = 0;
$http({
method: 'GET',
url: 'api/schedules/' + "TPO01"
}).then(function onSuccessCallback(response) {
reg.teacherInfoList[0] = response.data;
console.log(reg.teacherInfoList[0]);
$scope.start();
}, function errorCallback(response) {
$scope.start();
});
}
$scope.start();
});
HTML
<div ng-controller="overviewController as oc">
<ul>
<li ng-repeat="teachInfo in oc.teacherInfoList ">
{{teachInfo.fullname}}
<div ng-repeat="day in teachInfo.days | filter: oc.dayfilter">
Today is: {{day.day}} {{day.date}}
<ul ng-repeat="roster in day.entries">
<li>
Name: {{roster.name}}
</li>
<li>
Start: {{roster.start}}
</li>
<li>
End: {{roster.end}}
</li>
<li>
Note: {{roster.note}}
</li>
</ul>
</div>
</li>
</ul>
The snippet used above might cause flickering issues:
reg.teacherInfoList[0] = response.data;
Flickering may also occur with the following code:
reg.teacherInfoList.splice(0,1);
reg.teacherInfoList.splice(0,0,response.data);
Efforts have been made to resolve the issue using:
ng-cloack
Also tried:
track by $index
Additionally, referring to this article:
How does the $resource `get` function work synchronously in AngularJS?
Although a solution eludes me currently, it's evident that replacing the array momentarily results in flickering. Any suggestions on how to overcome this challenge effectively?