指令在消化之后才能访问重复的儿童

Question

我正在写一个关于ul元素的指令，通常是使用ng-repeat标记的li子元素。我需要访问这些孩子来制作一些副本，但在我的postLink函数中，如果我调用iElement.children（），我将获得一个空列表！更奇怪的是，如果我访问DOM属性，即iElement [0] .children，我会得到实际的列表。我可以通过将所有内容包装在$ timeout中来解决这个问题，但是当我在代码中执行一些DOM操作时，它会创建一个闪烁。我尝试使用范围。$ evalAsync，但那时孩子们不像以前一样。知道发生了什么事吗？我最好奇的是为什么DOM子属性工作但jqLit​​e .children（）方法不起作用。

Answer 1

这里可能发生的是指令绑定并在之前触发 ng-repeat完成渲染视图上的元素。

您可以使用来自控制器的$ 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，具体取决于您的代码层次结构。