Question

我有一个ngRepeat元素的HTML：

<ol id="animationFrame">
  <li ng-repeat="animationImage in animationImages" ng-repeat-listener>
    <img ng-src="{{animationImage.src}}" id="{{animationImage.id}}">
  </li>
</ol>

我要根据id使用angular.element进行选择，如下所示：

angular.element('#animation-image-' + Math.floor($scope.animation.frameImage));

将$scope.animation.frameImage向下舍入为整数。我可以看到我正在使用正确的选择器（例如，'#animation-image-1'是最初加载的选择器），当我使用滑块更改$scope.animation.frameImage时，它可以正常工作。

页面加载时

问题，使用正确选择器返回的angular.element对象为undefined。现在，我认为这是因为ng-repeat尚未填充。所以我在上面的HTML中添加了以下ng-repeat-listener指令：

.directive('ngRepeatListener', function() {
  return function(scope) {
    if(scope.$last) {
      scope.$emit('NGREPEATCOMPLETE');
    }
  }

我这样使用它：

$scope.$on('NGREPEATCOMPLETE', function() {
  console.log(angular.element('#animation-image-1'));
};

实际上是在某个时候被调用（谁知道它是否在正确的时间）。

为什么这不起作用？我该如何解决？

Answer 1

ngRepeat在渲染阶段之前不会被渲染。要通过angular.element()访问元素，您可以使用$ evalAsync：

$scope.$evalAsync(function() {  angular.element(...);});

$ timeout也可以，但是在超时后触发摘要。如果您想在渲染后准备好访问DOM，并且之后不想触发另一个摘要，请使用$ evalAsync。

[编辑]

正如@maurycy所提到的，$ timeout有第二个参数可以避免触发另一个摘要：

$timeout(function() {...}, 0, false);

无法在ng-repeat中使用angular.element进行选择

1 个答案: