角载荷与$digest

Question

我试图使用angular.element获取span元素的长度，但是，我意识到加载角需要时间来执行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);
});

我做了一个柱塞柱塞连杆

如果有人能解释角度加载的方式和时间，以及为什么会发生这种情况，将是有帮助的。谢谢你先进！

Answer 1

首先-不要在控制器中执行DOM操作.

之所以会发生这种情况，是因为您的控制器首先被初始化，这将触发ng重复模型作用域变量。

为了测试它，它将代码包装在一个$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);
  });
});

更好的处理方法是当ng-重复完成时调用函数。

Answer 2

检查工作演示：柱塞。

添加$timeout以等待$digest完成：

var app = angular.module('plunker', []);

app.controller('MainCtrl', ['$scope', '$timeout', function($scope, $timeout) {
  $scope.letters = ["H", "E","L", "L","O"];

  $timeout(function () {
    $scope.randomnbr = angular.element(document.querySelectorAll('.nbr'));
    alert($scope.randomnbr.length);
  });

}]);