javascript - 指令在摘要之后才能访问 ng 重复的子级

Question

我正在编写一个放置在 ul 元素上的指令，通常带有使用 ng-repeat 消除的 li 子元素。我需要访问这些子项来制作一些副本，但在我的 postLink 函数中，如果我调用 iElement.children()，我将得到一个空列表!更奇怪的是，如果我访问 DOM 属性，即 iElement[0].children，我会得到实际的列表。我可以通过将所有内容包装在 $timeout 中来解决此问题，但当我在代码中进行一些 DOM 操作时，它会产生闪烁。我尝试使用scope.$evalAsync，但 children 像以前一样不在那里。知道发生了什么事吗？我最好奇为什么 DOM 子属性可以工作，但 jqLit​​e .children() 方法却不能。

Answer 1

这里可能发生的情况是，指令在 ng-repeat 完成渲染 View 上的元素之前绑定(bind)并触发。

您可以使用 Controller 中的 $broadcast 事件来解决此问题，并使用 $on 事件监听器在指令内捕获它。

if ($scope.$last === true) {
   $scope.$broadcast('ngRepeatFinished');
 }

以及你的指令内部

scope.$on('ngRepeatFinished', function(){...});

您还可以为 ng-repeat 事件创建指令

.directive('ngRepeatFinished', function () {
  return {
     restrict: 'A',
     link: function (scope, element, attr) {
         if (scope.$last === true) {
                scope.$broadcast('ngRepeatFinished');
        } 
    }
 }
});

根据您的代码层次结构使用 $broadcast 或 $emit。