javascript - Angular 加载和 $digest

Question

我正在尝试使用 angular.element 获取 span 元素的长度但是，我意识到加载 Angular 以执行 ng-repeat 需要时间。因此，我没有得到正确的长度数来返回。

我要完成的是:首先，根据字母的长度显​​示零的个数。然后随机生成一个0到9的数字，最终将数字替换为字母正确位置。

HTML文件

    <span class="nbr" ng-repeat="(key, value) in letters track by $index">0</span>

JS文件

app.controller('MainCtrl', function($scope) {
   $scope.letters = ["H", "E","L", "L","O"];
   $scope.randomnbr = angular.element(document.querySelectorAll('.nbr'));
        alert($scope.randomnbr.length);
});

我做了一个 Plunker Plunker Link

如果有人可以解释如何以及何时加载 Angular 以及为什么会发生这种情况，将会有所帮助。 谢谢先进!

Answer 1

首先 - 不要在 Controller 中进行 DOM 操作。

发生这种情况是因为您的 Controller 首先被初始化，这会触发 ng-repeat 模型范围变量。

要测试它，请将代码包装在 $timeout 中 - 这将确保您调用在下一个摘要周期中调用的 angular.element。

app.controller('MainCtrl', function($scope, $timeout) {
  $scope.letters = ["H", "E", "L", "L", "O"];
  $timeout(function() {
    $scope.randomnbr = angular.element(document.querySelectorAll('.nbr'));
    alert($scope.randomnbr.length);
  });
});

更好的处理方式是 Calling a function when ng-repeat has finished