Bootstrap material design not working properly with dynamic angular views

Question

I'm including material-bootstrap scripts into the index.html of my Angular project, but they need to be manually re-included in the views to work.

This is strange, as for all other scripts inserted into Angular this does not happen.

index.html

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

I also noticed that material-bootstrap doesn't play well with Grunt and Bower, and tends to remove itself on build (hence the manual includes at the bottom of the page).

Are these known bugs with Material-boostrap and Angular/Bower/Grunt or have I been doing something wrong?

If you require anything else please let me know!

edit:

dependencies 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

The problem is that the material design plugin for bootstrap works by applying transformations to the DOM and it is not designed to work automatically with frameworks like Angular.

The material framework requires you to declare a script like the following to initialize components:

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

This means that object are "material-ized" at page loading. Since an Angular.js application is single-paged, the style is applied only to elements already present in the page (try to add new component, also without using views: you should get the same result).

You get the required behaviour (not fully functional) if you include the scripts in the views pages because Angular.js, under the hood, loads the view page as it was a normal page, then takes the contents of the dom and merge the view tree with the single-page tree.

I suggest you trying to add a call to $.material.init() after loading the view. Be careful as there are issues with calling the init multiple times, because of the ripples library. As stated here (https://github.com/FezVrasta/bootstrap-material-design/issues/184) you should avoid ripples to attach the event handlers again:

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