AngularjsディレクティブがDOM属性値の変更に更新する

Question

私はAngularjsのscrollspyモジュールで作業してきました。私は、ページが動的コンテンツを扱っている場合、scrollspyのデータ（要素の位置）がすぐに時代遅れになる問題にぶつかってきました。このような問題に対処するためのanglejsの方法は何ですか？

DOM操作を実行するディレクティブ$broadcastは、scrollspyモジュールが調べて、その位置データをリファクタリングできるようにするイベントですか？

scrollboxモジュールは、scrollHeightの変更がx秒ごとに$timeoutであることを確認する必要がありますか？

DOM属性値の変更（属性：offsetTop、offsetHeight、scrollHeight、データ属性などの属性）をバインドして監視する方法はありますか？

更新：コードなしAdded code base to GitHub

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

} 

現在、実際に機能するポリフィルを検索しています。

EDIT：変異オブザーバがサポートされていない場合のフォールバックとしてのポーリングを追加しました。

Answer 2

私は暗闇の中でビットを刺すんだけど、私はあなたのscrollspyモジュールのチェックをお勧めしますたび$rootScopeが$digestコールを受信します。したがって、$rootScope.$watchを使用してください。

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

Answer 3

何かこれはうまくいくはずです...しかし、CSSトランジションでは更新されないようです。おそらくすぐに手に負えなくなるイベントを発行し、確かで動作するようにあなたのモジュールが非友好的にするために他のディレクティブを拘束

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