6

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"
  }
T J
  • 42,762
  • 13
  • 83
  • 138
Phil Hudson
  • 3,819
  • 8
  • 35
  • 59
  • I don't know this technology but often scripts' references supposed to be in Shared view like `PageLayout` in which other views are embeded. – Yoda Oct 05 '14 at 19:27
  • Hi, yes it is in a shared view. Basically the index.html in Angular is the single page, and views are loaded within that page. Index almost acts as a wrapper and hence all scripts loaded into it should work within its child views – Phil Hudson Oct 05 '14 at 19:34
  • probably a silly question, but are you sure the material-bootstrap reference is present in your bower.json ? – Sycomor Oct 05 '14 at 20:11
  • yep :) I'll post a snipped of my dependencies above! – Phil Hudson Oct 05 '14 at 20:42
  • probably is not the solution to your problem, but ripples.js must be included before material.js. We have also refactored the entire theme and now it works better with bower. Give it a try. – Fez Vrasta Oct 06 '14 at 07:18
  • @FezVrasta thanks a lot Fez, will rebuild with the new version! – Phil Hudson Oct 06 '14 at 08:38
  • @FezVrasta I think that has solved it for material.js, but ripples.js is still not automatically included? – Phil Hudson Oct 06 '14 at 18:13
  • If you're using Bootstrap material design with AngularJS, checkout [Angular Bootstrap Material](http://tilwinjoy.github.io/angular-bootstrap-material/) – T J May 11 '16 at 14:20

1 Answers1

2

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;
}
Nicola Ferraro
  • 4,051
  • 5
  • 28
  • 60