Angularjs指令更新到DOM屬性值的更改

我一直在爲Angularjs的Scrollspy模塊工作。我遇到了如果頁面處理動態內容的問題，滾動數據（元素位置）很快就會過時。處理諸如此類問題的方法是什麼？Angularjs指令更新到DOM屬性值的更改

是否有任何指令執行DOM操作$broadcast scrollspy模塊尋找的事件 - 允許它重構其位置數據？

Scrollspy模塊應該每隔x秒檢查一次scrollHeight更改與$timeout？

甚至更好，有沒有辦法綁定和監視DOM屬性值的變化（屬性如offsetTop，offsetHeight,scrollHeight，而不是數據屬性）？

2013-10-13 Patrick

限制其他指令發出事件可能會很快變得笨拙，並且肯定會讓你的模塊不友好地工作。不幸的是，對於變暗的元素沒有一個事件，所以我恐怕投票$ timeout impl可能是你最好的候選人。至少它很容易通過$ timeout.flush（）:)進行測試。 – SonOfNun

作爲惡魔在這裏提倡，但是如果元素高度發生了變化，但整體'scrollHeight'沒有......突然你需要檢查一切 – Patrick

突變觀察者似乎是需要的設施，不幸的是他們是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，則添加輪詢作爲後備。

來源

2013-11-25 10:19:55 Patrick

沒有我捅死在黑暗中位碼，但我會每$rootScope收到$digest通話時間提示您scrollspy模塊檢查。所以使用$rootScope.$watch。

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

來源

2013-10-26 16:51:13

對不起，花了我一些時間來回到這個。添加了GitHub上代碼的鏈接。這會被稱爲晚，儘管一旦DOM被更新和渲染？ – Patrick

是的，直到AngularJS完成加載指令和控制器並綁定它們之後才能調用它。 –

然而，這可能只是當前的代碼結構。不幸的是，這實際上只處理了一半的問題（假設它有效）。除非它也稱爲'scope。$ apply（）;'，這與調用重新計算方法的基本要求是一樣的，否則將不會捕獲例如點擊改變其高度的「div」。 – Patrick

像這樣的東西應該工作......雖然似乎沒有更新與CSS轉換。

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

來源

2015-12-14 22:04:28 plong0

Angularjs指令更新到DOM屬性值的更改

回答

相關問題