As a newcomer to AngularJS, I have come across conflicting information regarding ng-bind and its relationship with updating the output when the data source array changes. While some suggest calling $scope.apply() is necessary, others claim that using ng-repeat should work smoothly without any additional steps. However, in my current scenario, not all elements are being displayed on the page:
<body ng-app="gallery">
<div ng-controller="GalleryController">
{{imageFolder}}
<div class="uk-child-width-1-5 uk-grid-small" uk-grid>
<div ng-repeat="image in imageFolder">
hier
</div>
</div>
</div>
</body>
The JavaScript code:
let gallery = angular.module('gallery', []);
gallery.controller('GalleryController', function($scope) {
$scope.imageFolder = [1,2];
setTimeout(function(){
console.log($scope);
$scope.imageFolder.push(6,7);
console.log($scope);
console.log($scope.imageFolder)
},1000);
$scope.imageFolder.push(3,4,5);
console.log($scope);
});
On the frontend, we observe:
[1,2,3,4,5] hier hier hier hier hier
Even though 6 and 7 are visible in the console.log, there seems to be an issue with triggering a frontend update. In future stages of this project, image details such as URL and title will be loaded into the DOM via Ajax (using sharepointplus), which may take around 5-7 seconds. My initial implementation failed to display any images, as ng-repeat was not being triggered due to a similar issue encountered with setTimeOut...
How can I ensure that Angular refreshes upon changes in object content, specifically transitioning from an empty array to a filled one?
Appreciate your assistance and suggestions.