材質設計Lite用於Angular JS的渲染問題

使用Material Design Lite（getmdl.io）時出現了一些問題。我遵循getmdl.io web中顯示的步驟來安裝它（實際上我使用bower），但是我總是遇到同樣的問題，當我在web中更改ng路由時，某些資源無法正確呈現，例如，我需要重新加載頁面才能正確呈現它。材質設計Lite用於Angular JS的渲染問題

首先，我有這樣的：

然後當我重裝，我得到我想要的東西：

我不能明白的是爲什麼其他資源，如谷歌的圖標或按鈕可以正常工作，但導航欄上的菜單按鈕和其他資源（如此類）需要實時載入頁面才能正確呈現。

我嘗試使用託管方法和鮑爾方法來包含庫。

任何想法是怎麼回事？

來源

2015-09-05 Pablo Ortuño

像MDL這樣的庫通過等待頁面使用DOMContentLoaded事件加載，掃描頁面以獲取輸入元素等內容並使用JavaScript處理它們，以便它們可以注入與組件一起工作所需的零碎。這在靜態網站上可以正常工作，但DOMContentLoaded事件只會觸發一次，所以當Angular執行頁面轉換時，DOM不會知道MDL。

材料設計精簡版在其FAQ約using MDL on dynamic websites一節：

材料設計精簡版會自動註冊並呈現標記在網頁加載時MDL類的所有元素。但是，在您動態創建DOM元素的情況下，您需要使用upgradeElement函數註冊新元素。這裏是你如何可以動態地創建與上一節中所示的漣漪一樣凸起按鈕：
<div id="container"/> 
<script> 
    var button = document.createElement('button'); 
    var textNode = document.createTextNode('Click Me!'); 
    button.appendChild(textNode); 
    button.className = 'mdl-button mdl-js-button mdl-js-ripple-effect'; 
    componentHandler.upgradeElement(button); 
    document.getElementById('container').appendChild(button); 
</script> 

當然，這可能也不太容易在你的情況下做的，因爲你必須手動查找每個新元素並在其上調用upgradeElement。

通常，Angular不使用這種基於事件的DOM操作，而是使用指令來啓動DOM更改。考慮使用與Angular進行互操作的庫，而不是像Angular Material這樣的庫。

來源

2015-09-05 23:38:42

嗯我明白了，我認爲材料設計精簡版的作品像bootstrap ..但顯然沒有！：P非常感謝你Alexis！ –

我過去在我的代碼此功能

angular.module('app', ['ngRoute']). 

    run(function($rootScope, xxxx, xxx){ 
     $rootScope.$on('$viewContentLoaded', function(event, next) { 
      componentHandler.upgradeAllRegistered(); 
     }); 
    });

它完美！祝你好運..

來源

2015-10-29 23:36:35 Danieldms

完美，這將正確渲染你的角頁。所有想要使用MDL和角度的開發人員都必須這樣做。 – shammelburg

超棒的男人！你只需要救我！這個答案必須標記爲最好的答案。 –

當調用upgradeAllRegistered（）爲我工作時添加$ timeout。謝謝！ – natdico

材質設計Lite用於Angular JS的渲染問題

回答

相關問題