javascript - Angularjs 指令更新到 DOM 属性值的变化

Question

我一直在为 Angularjs 开发一个 scrollspy 模块。我遇到了一个问题，如果页面正在处理动态内容，scrollspy 数据(元素位置)很快就会过时。 angularjs 处理此类问题的方法是什么？

任何执行 DOM 操作的指令 $broadcast 是否应该是 scrollspy 模块寻找的事件 - 允许它重构其位置数据？

scrollspy 模块是否应该每 x 秒检查一次 scrollHeight 的变化并使用 $timeout？

或者更好的是，有没有一种方法可以绑定(bind)并监视 DOM 属性值的变化(offsetTop、offsetHeight、scrollHeight 等属性，不是数据属性)？

更新:Added code base to GitHub

Answer 1

Mutation Observers 似乎是所需的工具，不幸的是它们是 only supported by the latest browsers .

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
if( MutationObserver ) {

    for ( var i = 0; i < spyService.spies.length; i++ ) {
        var spy = spyService.spies[i].scope.spy;
        var target = document.getElementById(spy);

        var config = {
            attributes: true,
            childList: true,
            characterData: true,
            subtree: true
        };
        var observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                console.warn('mutation observation');
            });
        }).observe(target, config);
    }
}
else {
    console.warn('no mutation observers here');
    $interval(function() {
        angular.element( document ).ready( function() {
            console.log('refreshing');
        });
    }, 2000);

}

目前正在寻找一个真正有效的 polyfill。

编辑:如果不支持 Mutation Observers，则添加轮询作为后备。