AngularJS 观察 DOM 变化 [英] AngularJS watch DOM change
问题描述
我有一个 auto-carousel
指令,它遍历链接元素的子元素.
I have one auto-carousel
directive which iterates through the linked element's children.
然而,孩子们还没有加载到 DOM 中,因为他们的 ng-if
的表达式还没有被解析.
The children however are not yet loaded in the DOM, because their ng-if
s expressions have not been parsed yet.
如何确保父指令知道它的 DOM 树发生了变化?
How can I make sure the parent directive knows there have been changes to it's DOM tree?
<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
但这不能回答问题,也不是我需要的.
I could use $timeout
but that feels unreliable. I could also use ng-show
instead of ng-if
but that does not answer the question and not what I need.
推荐答案
所以这是我最终做的:
我发现您可以将函数传递给 $scope.$watch
.从那里,返回要监视更改的表达式的值非常简单.它的工作方式与为作用域上的属性传递键字符串完全一样.
I discovered you could pass a function to $scope.$watch
. From there, it's pretty straightforward to return the value of the expression you want to watch for changes. It will work exactly like passing a key string for a property on the scope.
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
只保存元素.
I am watching childNodes
, not children
, because the childNodes
list holds elements as well as text nodes and comments. This is priceless because Angular uses comment placeholders for directives like ng-repeat
, ng-if
, ng-switch
and ng-include
which perform transclusion and alter the DOM, while children
only holds elements.
这篇关于AngularJS 观察 DOM 变化的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!