AngularJS 观察 DOM 变化

Question

我有一个 auto-carousel 指令，它循环访问链接元素的子元素。

但是，子级尚未加载到 DOM 中，因为它们的 ng-if 表达式尚未解析。

如何确保父指令知道其 DOM 树已发生更改？

        <ul class="unstyled" auto-carousel>
          <li class="slide" ng-if="name">{{name}}</li>
          ...
          <li class="slide" ng-if="email">{{email}}</li>
        </ul>

我可以使用$timeout，但这感觉不可靠。我也可以使用 ng-show 代替 ng-if ，但这并不能回答问题，也不是我需要的。

Answer 1

这就是我最终所做的:

我发现你可以将函数传递给 $scope.$watch 。从那里，返回您想要观察变化的表达式的值非常简单。它的工作方式与为作用域上的属性传递键字符串完全相同。

link: function ($scope, $el, $attrs) {
  $scope.$watch(
    function () { return $el[0].childNodes.length; },
    function (newValue, oldValue) {
      if (newValue !== oldValue) {
        // code goes here
      }
    }
  );
}

我正在看childNodes ，不是children ，因为childNodes列表包含元素以及文本节点和注释。这是无价的，因为 Angular 对像 ng-repeat 这样的指令使用注释占位符。 , ng-if , ng-switch和ng-include执行嵌入并改变 DOM，而 children只保存元素。