javascript - Angular 模型更新后获取 DOM 元素

Question

Angular 新手。我试图在模型更新后获取 DOM 元素，但得到 null。这是我的 HTML 代码。

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

这是我的 Controller 代码

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

Canvas 为空，因为 document.getElementById 找不到该元素。服务器的响应正确返回(因此我没有添加 FileService 代码)。 data.files 包含适当的数据。

模型更新后如何获取元素？

Answer 1

这是因为模型已更新，但 DOM 尚未更新。

您可以做的是调用带有超时的 updateCanvas 函数，这将确保该函数在 DOM 更新后运行:

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