Bootstrap Material Design Doesn't Work Properly with Dynamic Angular View

Question

I include parent bootstrap scripts in 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 bootstrap material doesn’t work well with Grunt and Bower and tends to be removed during assembly (hence the manual is at the bottom of the page).

Are these known errors with Material-boostrap and Angular / Bower / Grunt or am I doing something wrong?

If you require anything else, please let me know!

change

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 such as Angular.

The material structure requires you to initialize the script components as follows:

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

This means that the object “materializes” when the page loads. Since the Angular.js application is single-page, the style applies only to elements already present on the page (try adding a new component, also without using views: you should get the same result).

You get the required behavior (not fully functional) if you include scripts on the view pages because Angular.js, under the hood, loads the view page as it was a regular page, then takes the contents of dom and merges the view tree with a one-page tree.

I suggest you try adding the call to $ .material.init () after loading the view. Be careful, as there are problems with calling init several times, due to library ripples. As stated here ( https://github.com/FezVrasta/bootstrap-material-design/issues/184 ), you should avoid ripples in order to attach 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; }