Question

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

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

如果scrollspy模块每隔x秒检查一次带有$timeout的scrollHeight变化吗？

或者甚至更好，是否有办法绑定和监视DOM属性值更改（offsetTop，offsetHeight，scrollHeight等属性，而不是数据属性？）

Answer 1

突变观察者似乎是所需的设施，不幸的是他们是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，则添加轮询作为后备。

Answer 2

这样的东西应该有用......但似乎没有用CSS过渡更新。

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

Answer 3

没有代码我在黑暗中刺了一下，但我会建议你每次$rootScope收到$digest电话时都会检查你的rolllspy模块。因此，请使用$rootScope.$watch。

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

Angularjs指令更新DOM属性值的更改

3 个答案: