Recently delving into Angular development. I've come across an issue where I'm attempting to retrieve a DOM element after the model has been updated, only to find it returning null. Below is the snippet of my HTML code.
<div ng-repeat="file in files">
<span id="file{{file.id}}">{{file.name}}</span>
<canvas id="canvas{{file.id}}" />
</div>
Shown here is the relevant controller code:
angular.module('mycontrollers',[])
.controller('FileController',function(FileService) {
$scope.files = {};
FileService.updateFiles()
.then(
function(data) {
$scope.files = data.files;
updateCanvas($scope.files);
},function(err) {
console.log("error occured");
};
};
function updateCanvas(files) {
files.forEach(function(file){
var canvas = document.getElementById('canvas'+file.id);
...
do something with canvas
...
}
}
The critical problem arises when the canvas appears as null due to document.getElementById failing to locate the desired element. The server response functions correctly (thus the exclusion of FileService code). Data within data.files remains appropriate.
Seeking insight on how to access the element post-model update.