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

Angularjs directives updating to changes in DOM attribute values

本文关键字：变化 属性 DOM 指令 更新 Angularjs      更新时间：2023-09-26

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

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

scrollspy模块应该每x秒检查一次滚动$timeout高度的变化吗？

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

更新：向 GitHub 添加了代码库

突变观察者似乎是所需的工具，不幸的是，它们仅受最新浏览器的支持。

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);
}

当前正在寻找实际有效的填充物。

编辑：添加了轮询作为备份，如果不支持突变观察者。

这样的事情应该可以工作... 不过，似乎没有使用 CSS 过渡进行更新。

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

没有代码，我会在黑暗中刺伤，但我建议您每次收到$digest电话时$rootScope scrollspy 模块进行检查。所以使用$rootScope.$watch.

$rootScope.$watch(function() {
  // Update scrollspy data here
}
相关文章：