javascript - $http 成功功能 block 中不可用的动态元素和范围变量

Question

我正在调用一个 $http get 方法，在成功回调中，我根据该响应在 html 中得到的响应正在执行 ng-repeat 以迭代元素。此外，我根据 ng-repeat 的 $index 动态维护一些 div 的 id。现在，当我试图根据它们的 id 设置这些 div 的 innerHTML 时，它给我一个错误，因为那个元素当时还没有创建。对这种情况下发生的事情感到困惑。下面的模拟代码片段供您引用:

<tr ng-repeat-start= "dataArray in gridData" >
    <td>
        <span ng-bind="expanded ? '-' : '+'" ng-click="expanded = !expanded"></span>{{dataArray.name}}
    </td>
    <td>
        <div id="th_{{$index + 1}}" ng-hide="expanded" ng-repeat="rcL1 in rch.rcs" >
            <div ng-hide="expandedTreeCol" id="to_{{$parent.$index}}_{{$index}}">
            </div>
        </div>
    </td>
</tr>

这是js片段:

$http.get(url)
        .then(function(response) {
            console.log(response);

            $scope.gridData = response.data.data;

            var rch = $scope.rch.rcs;
            var grid_data = $scope.gridData;

            document.getElementById("to_0_0").innerHTML = "1";
        });

在尝试设置此 innerHTML 时，它显示“无法将属性‘innerHTML’设置为 null”。但是，当我完成代码的执行时，在 dom 中，我可以找到创建了该 id 的 div。但是，当我在回调函数中时，它似乎尚未创建。有人请解释这里发生了什么以及我如何从 js 设置 innerHTML。

谢谢。

Answer 1

1. ng-repeat 指令在 $scope.rch.rcs 上初始化和初始化观察器
2. 发送http请求，执行回调
3. document.getElementById("to_0_0")什么都不返回
4. 当你使用 $http 时，它会触发 $digest
5. $digest 运行 -> 在 $scope.rch.rcs 上观察变化 -> ng-repeat 指令渲染元素