引導材料設計無法在動態角度視圖下正常工作

Question

我在我的Angular項目的index.html中包含了材料引導腳本，但是需要手動將它們重新包含在視圖中才能工作。

這很奇怪，因為插入Angular的所有其他腳本都不會發生。

index.html

<script src="bower_components/bootstrap-material-design/scripts/material.js"></script>
<script src="bower_components/bootstrap-material-design/scripts/ripples.js"></script>

我還注意到，material-bootstrap在Grunt和Bower上不能很好地發揮作用，並且傾向於在構建時自行刪除（因此手冊位於頁面底部）。

這些是Material-boostrap和Angular / Bower / Grunt的已知錯誤，還是我做錯了什么？

如果您還有其他要求，請告訴我！

編輯 ：

bower.json中的依賴項

"dependencies": {
    "angular": "~1.3.0",
    "json3": "~3.3.1",
    "es5-shim": "~3.1.0",
    "bootstrap": "~3.2.0",
    "angular-resource": "~1.3.0",
    "angular-cookies": "~1.3.0",
    "angular-sanitize": "~1.3.0",
    "angular-animate": "~1.3.0",
    "angular-touch": "~1.3.0",
    "angular-route": "~1.3.0",
    "bootstrap-material-design": "*",
    "jsjws": "~3.0.2",
    "angular-ui-router": "0.2.11"
  }

Answer 1

問題在於，用於引導程序的材料設計插件通過將轉換應用於DOM來工作，而不能設計為與Angular之類的框架一起自動工作。

材料框架要求您聲明一個類似於以下內容的腳本以初始化組件：

<script>
  $.material.init();
</script>

這意味着對象在頁面加載時被“物化”。 由於Angular.js應用程序是單頁的，因此樣式僅應用於頁面中已存在的元素（嘗試添加新組件，也無需使用視圖：您應該獲得相同的結果）。

如果將腳本包含在視圖頁面中，則會獲得所需的行為（功能不完全），因為Angular.js在后台將視圖頁面作為普通頁面加載，然后獲取dom的內容並合並視圖單頁樹。

我建議您嘗試在加載視圖后添加對$ .material.init（）的調用。 由於漣漪庫，多次調用init會出現問題，因此請務必小心。 如此處所述（ https://github.com/FezVrasta/bootstrap-material-design/issues/184 ），您應該避免產生波紋以再次附加事件處理程序：

// add the "done" boolean inside ripples.js
window.ripples = { 
    init: function(withRipple) { /*bla bla*/ },
    done: false
}

// Then, where you run ripples.init... (aka, material.js, or maybe directly inside the init function of ripples.js)
if (!window.ripples.done) { 
  ripples.init();
  ripples.done = true;
}