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

Question

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

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

scrollspy 模块应该每 x 秒检查一次 scrollHeight 的变化$timeout吗？

或者更好的是，有没有办法绑定和观察 DOM 属性值的变化（属性如offsetTop, offsetHeight, scrollHeight，而不是数据属性）？

score 6 · Accepted Answer

Mutation Observers 似乎是需要的工具，不幸的是它们只被最新的浏览器支持。

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，则添加轮询作为后备。

score 1 · Accepted Answer

像这样的东西应该可以工作......不过似乎没有用 CSS 转换更新。

scope.$watch(function(){
    return elem[0].offsetLeft;
}, function(x){
    console.log('ITEM AT '+x);
});

score 0 · Accepted Answer

如果没有代码，我会在黑暗中刺伤一点，但我建议您每次$rootScope接到$digest电话时检查您的滚动间谍模块。所以使用$rootScope.$watch.

$rootScope.$watch(function() {
  // Update scrollspy data here
}

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

3 回答 3

Related

Reference