AngularJS观察DOM的变化

发布时间：2020-12-17 08:30:25 所属栏目：安全来源：网络整理

导读：我有一个自动轮播指令，通过链接元素的孩子迭代。然而，孩子们还没有加载到DOM中，因为他们的ng-ifs表达式还没有被解析。如何确保父指令知道它的DOM树有更改？ ul class="unstyled" auto-carousel li class="slide" ng-if="name"{{name}}/li ... li class=

我有一个自动轮播指令，通过链接元素的孩子迭代。

然而，孩子们还没有加载到DOM中，因为他们的ng-ifs表达式还没有被解析。

如何确保父指令知道它的DOM树有更改？

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

我可以使用$超时，但感觉不可靠。我也可以使用ng-show而不是ng-if，但这不回答问题，而不是我需要的。

所以这里是我最后做的：

我发现你可以传递一个函数到$ 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，而不是孩子，因为childNodes列表包含元素以及文本节点和注释。这是无价的，因为Angular使用注释占位符像ng-repeat，ng-if，ng-switch和ng-include来执行互斥和改变DOM，而孩子只保存元素。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!