Il design del materiale di bootstrap non funziona correttamente con le viste angolari dinamiche

Question

Sono inclusi gli script di bootstrap del materiale nell'index.html del mio progetto Angular, ma devono essere reinseriti manualmente nelle viste per funzionare.

Questo è strano, come per tutti gli altri script inseriti in Angular questo non accade.

index.html

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

Ho anche notato che il materiale-bootstrap non gioca bene con Grunt e Bower, e tende a rimuovere se stesso in configurazione (da qui il manuale comprende nella parte inferiore della pagina) .

Sono noti bug con Materiale-boostrap e Angolare/Bower/Grunt o ho fatto qualcosa di sbagliato?

Se avete bisogno di qualcos'altro per favore fatemelo sapere!

modificare:

dipendenze in 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

Il problema è che il plugin di progettazione materiale per lavori di bootstrap applicando trasformazioni al DOM e non è progettato per funzionare automaticamente con strutture come Angular.

Il quadro materiale si richiede di dichiarare uno script come il seguente per inizializzare i componenti:

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

Questo significa che oggetto sono "materia-ized" al caricamento della pagina. Poiché un'applicazione Angular.js è a singola pagina, lo stile viene applicato solo agli elementi già presenti nella pagina (prova ad aggiungere un nuovo componente, anche senza usare le viste: dovresti ottenere lo stesso risultato).

Si ottiene il comportamento richiesto (non completamente funzionale) se si includono gli script nelle pagine delle visualizzazioni poiché Angular.js, sotto il cofano, carica la pagina di visualizzazione come se fosse una pagina normale, quindi acquisisce il contenuto della dom e unisci l'albero delle viste con l'albero a pagina singola.

Ti suggerisco di provare ad aggiungere una chiamata a $ .material.init() dopo aver caricato la vista. Fai attenzione perché ci sono problemi con la chiamata all'input più volte, a causa della libreria delle increspature. Come indicato qui (https://github.com/FezVrasta/bootstrap-material-design/issues/184) si dovrebbe evitare increspature per attaccare ancora una volta i gestori di eventi:

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