I'm using several libraries with this project. The one that is complaining is jQuery. I'm not sure that jQuery is actually the culprit here. I've tried several different methods to get the desired result and I've ended up with a solution that results in the fewest errors and still functions correctly. OK, so I'm using jQuery, Materialize, Angular, Angular UI-Router and Angular Materialize. I have several routes defined and also nested views. So, on to the code:
<ul tabs>
<li class="tab"><a href="#/one" ui-sref="one" ui-sref-active="active">One</a></li>
<li class="tab"><a href="#/two" ui-sref="two" ui-sref-active="active">Two</a></li>
<li class="tab"><a href="#/three" ui-sref="three" ui-sref-active="active">Three</a></li>
</ul>
So, this method, by combining href="#/one" with ui-sref="one" on the anchor element functions correctly, but still produces an error on the initial app load. Uncaught Error: Syntax error, unrecognized expression: #/one.
Just about all search results for this error have something to do with the format of strings and quotes. This leads me to believe that it has something to do with one of the libraries. Most likely Materialize or UI-Router. Maybe both together.
Here is a Fiddle that reproduces the problem – https://jsfiddle.net/whatisthebigpicture/9uudedvx/ – the scripts are loaded in HTML because the external scripts panel wasn't working correctly. It was a challenge to reproduce the same problem on JSFiddle, but I'm confident that if it can be solved in the Fiddle then I can apply it to my app.
Does anyone have experience using these libraries together? Is there something I can do to get rid of the error or is it up to the library devs?
