에서 모델을 업데이트한 후 DOM 요소 가져오기

질문:

새로운 각도.모델을 업데이트한 후에 DOM 요소를 가져오려고 했지만 null을 받았습니다.이것은 나의 HTML 코드다.

<div ng-repeat="file in files">
 <span id="file{{file.id}}">{{file.name}}</span>
 <canvas id="canvas{{file.id}}" />
</div>

제 컨트롤러 코드예요.

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
    ...
    }
}

캔버스는 문서로 비어 있습니다.getElementById에서 요소를 찾을 수 없습니다.서버의 응답이 정확하게 되돌아왔습니다. (그래서 파일 서비스 코드를 추가하지 않았습니다.)데이터파일에는 적절한 데이터가 들어 있습니다.
모델을 업데이트한 후 요소를 가져오는 방법은 무엇입니까?

답안

모델이 업데이트되었지만 DOM이 업데이트되지 않았기 때문입니다.
DOM 업데이트 후에 함수가 실행되도록 하려면 시간 초과updateCanvas 함수를 호출할 수 있습니다.

.controller('FileController',function(FileService, $timeout) {
    ....
    $timeout(function() { updateCanvas($scope.files) });