Konstrukcja materiału Bootstrap nie działa poprawnie z dynamicznymi widokami kątowymi

Question

Załączam skrypty bootstrapu materiałowego do pliku index.html mojego projektu Angular, ale trzeba je ręcznie włączyć do widoku.

To dziwne, podobnie jak w przypadku innych skryptów wstawionych do Angular, to się nie dzieje.

index.html

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

Zauważyłem również, że materiał-bootstrap nie dobrze bawić Grunt i altana, i ma tendencję do usuwania się na kompilacji (stąd instrukcja zawiera w dolnej części strony) .

Czy te znane błędy dotyczą Material-boostrap i Angular/Bower/Grunt, czy też popełniłem błąd?

Jeśli potrzebujesz jeszcze czegoś, proszę dać mi znać!

edit:

zależności w 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

Problem polega na tym, że materiał wtyczki konstrukcja do prac bootstrapowych stosując transformacje do DOM i nie jest przeznaczony do pracy z automatycznie struktury takie jak Angular.

Materiał ramy wymaga deklarowania skrypt jak poniżej, aby zainicjować elementów:

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

Oznacza to, że obiekt jest „materiał-ized” na stronie załadunku. Ponieważ aplikacja Angular.js jest jednostronicowa, styl jest stosowany tylko do elementów już obecnych na stronie (spróbuj dodać nowy komponent, także bez widoków: powinieneś uzyskać ten sam wynik).

Otrzymujesz wymagane zachowanie (nie w pełni funkcjonalne), jeśli umieścisz skrypty na stronach widoków, ponieważ Angular.js, pod maską, ładuje stronę widoku, ponieważ była to normalna strona, a następnie pobiera zawartość domeny i połączyć drzewo widoku z drzewem o pojedynczej stronie.

Sugeruję próbę dodania połączenia do $ .material.init() po załadowaniu widoku. Należy zachować ostrożność, ponieważ są problemy z wywoływaniem init wiele razy, z powodu biblioteki zmarszczek. Jak stwierdzono tutaj (https://github.com/FezVrasta/bootstrap-material-design/issues/184) należy unikać zmarszczki ponownie dołączyć obsługi zdarzeń:

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