Question

我有画布项目的ng-repeat循环：

<ul>
    <li ng-repeat="item in todos">
        <canvas id="canvas-{{item.Guid}}"></canvas>
    </li>
</ul>

代码中的某个地方有addTodo函数，它有点像：

            $scope.todos.push(newTodo); 
            $scope.renderPDF(newTodo.Attachment,cxId);

其中cxId是canvas id，renderPDF使用getElementById在画布上渲染。但是当我添加待办事项时，虽然在 Chrome Developer Console 中有画布具有正确的ID，但我得到错误，即cxId上的getElementById返回 null 。一切都正确完成，Angular使用双向数据绑定，那么为什么会出现问题？

Answer 1

我想解释一下，因为它很特别。 Angular使用双向数据绑定，但在ng-book中我读到了这个过程。并且所有参数都在视图中（在这种情况下，也是生成canvas-id的todos），所有这些参数都在其范围内设置。在他们的变化，一个观点的变化。此过程是双向数据绑定。它发生在摘要周期中。所以有时间这样做，当我推动todo到阵列时，它还没有开始这个摘要周期。解决方案是在将元素添加到数组后强制执行摘要循环，将听取范围变量的更改：

而不是：

$scope.todos.push(newTodo);    
$scope.renderPDF(newTodo.Attachment,cxId);

应该有：

$scope.todos.push(newTodo);    
$scope.apply();
$scope.renderPDF(newTodo.Attachment,cxId);

apply方法强制执行摘要周期。

document getElementById在ng-repeated dom元素中返回null

1 个答案: