Mdb-ui-kit: Correct way of using $.material.init() with AngularjS

[fnk0]

Hi,

I've been having troubles using $.material.init() inside my controllers in AngularJS. Specially with the form-control tag.

My problem is if I don't call $.material.init() inside a controller the ripple effects/floating label does not work. And if I call it the ripples works just fine but the data binding by ng-model doesn't. I've been able to work around it by manually getting the element using an id once the form is submitted but I need to implement it to a search bar on which needs the data binding by the ng-model.

Is there a correct way of instantiating the $.material.init() that would make it available to all my controllers?

Thanks!

[FezVrasta]

have you tried including arrive.js before material.js ?

[fnk0]

Hmm.. I'm not sure what you mean by using arrive.js, I didn't saw it in any of your examples neither I know what that script does.

Here is my list of scripts

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/plugins.js"></script>
<script src="//tinymce.cachefly.net/4.1/tinymce.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.5/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.5/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.5/angular-cookies.min.js"></script>
<script src="bower_components/angular-local-storage/dist/angular-local-storage.min.js"></script>
<script src="js/vendor/angular_tinymce.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script data-require="[email protected]" data-semver="0.11.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.1.5/js/ripples.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.1.5/js/material.min.js"></script>
<script src="//fezvrasta.github.io/snackbarjs/dist/snackbar.min.js"></script>
<script src="js/main.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers/main_controller.js"></script>
<script src="js/controllers/authentication_controller.js"></script>
<script src="js/controllers/account_controller.js"></script>
<script src="js/controllers/map_controller.js"></script>
<script src="js/controllers/new_user_controller.js"></script>
<script src="js/controllers/pages_controller.js"></script>
<script src="js/controllers/new_page_controller.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>

I've tried rearranging them in many different orders but nothing seems to fix my problem :(

I will search for arrive.js and Include it before material.js and see what happens.

Thank you for this awesome library and for the quick response! :)

[fnk0]

That actually fixed the problem! Thank you!! :)

[FezVrasta]

you're welcome :)

[chenop]

Hi FezVrasta,

First of all i would say that great talent is revealed in this work :)

I'm trying to use your lib in AngularJS App.
Adding arrive.js make some of your fireworks to get displayed but its seems its got huge impact of performance of other components.
The animation of clicking a button is now very laggy.

Is it something familiar or I'm doing something wrong?

Thanks again for this gem!

[FezVrasta]

looks like arrive.js make things lag a lot.

You can manually init new elements (this is the suggested way) using $.material.something("CSS selector");

[chenop]

Thanks for the quick response.

Doing $.material.input() (in case of input) ruin Angular.js data binding.
I found this but i could not find the right way to integrate it into the code.

[FezVrasta]

This theme does not make use of web components

[chenop]

What do you mean? Can you a bit elaborate on that?

Thanks!

[prady00]

@chenop did you find some way around to use this in angular?

[FezVrasta]

Use Arrive.js with the PR #365. This is the easiest way.

It has not performance issues anymore and works great.

[tholford]

I'm having trouble running $.material.init() in my Angular app. Receiving the following error:

TypeError: Cannot read property 'init' of undefined

I have merged in the patch from PR#365 and included arrive.js, and here's how I'm attempting to init the plugin (via an ng-init tag in my ng template):

 // initializes the material design ripples 
  this.scope_.initMaterial = function() {
     angular.element.material.init();
  };

Any ideas?

[c437]

This is also not working for me too. Could you please share an example of doing it correctly?

[kevincobain2000]

arrive.js worked for me Thanks

// app.js
angular.module('starterApp', ['ngRoute','users'])

.config(function($routeProvider){
    // works with arrive js
    $.material.init();
})

<!-- Material Design for Bootstrap -->
  <script src="lib/arrive/js/arrive.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/js/material.min.js"></script>


  <script src="./app.js"></script>
  <script src="./src/users/UserController.js"></script>

[tilwinjoy]

If you are trying to use this project with AngularJS try http://tilwinjoy.github.io/angular-bootstrap-material/

[christopher-ustb]

hi, I have read all comments here, and I have tried including arrive.js to fix it, but I doesn't work.
Is the arrive.js downloaded from this repository https://github.com/uzairfarooq/arrive when I google arrive.js, it's first.

[tilwinjoy]

@christopher-ustb did you read the comment just above yours? Maybe give it a try...