javascript – Erro jQuery + AngularJS + Materialize CSS

Question:

I have the following procedure in my angular controller:

$(document).ready(function(){
  angular.element('.button-collapse').sideNav();
  angular.element('.parallax').parallax();
});

I'm starting these components from materialize css. When I enter this page for the first time, everything is OK, but if I click on any link within the site that redirects me to the page, the following error occurs:

jQuery.Deferred exception: Cannot read property 'indexOf' of undefined TypeError: Cannot read property 'indexOf' of undefined
    at r.fn.load (localhost:8080/assets/libs/jquery-3.1.0.min.js:4:18716)
    at HTMLImageElement.<anonymous> (localhost:8080/assets/libs/materialize.min.js:8:4380)
    at Function.each (localhost:8080/assets/libs/jquery-3.1.0.min.js:2:2815)
    at r.each (localhost:8080/assets/libs/jquery-3.1.0.min.js:2:1003)
    at HTMLDivElement.<anonymous> (localhost:8080/assets/libs/materialize.min.js:8:4341)
    at Function.each (localhost:8080/assets/libs/jquery-3.1.0.min.js:2:2815)
    at r.each (localhost:8080/assets/libs/jquery-3.1.0.min.js:2:1003)
    at r.a.fn.parallax (localhost:8080/assets/libs/materialize.min.js:8:3872)
    at HTMLDocument.<anonymous> (localhost:8080/assets/js/app.js:25:36)
    at j (localhost:8080/assets/libs/jquery-3.1.0.min.js:2:29568) undefined

I couldn't solve it… I'm starting on this platform… can someone help me?

Answer:

angular.element cannot make css-selectors newm by tagname or .classname to make that selection you have two choices:

  • a) Include jQuery first than Angular, so angular.element becomes an alias for $
  • b) uses, as it says in the docs, document.querySelectorAll()
Scroll to Top