I'm building an app in Angular 1 and have seen that I'm not supposed to interact directly with the DOM, rather I'm supposed to build custom directives to handle that interaction. I'm a bit new to web development in general, so I'm not sure how I would translate the JQuery examples given on the documentation at all of the UI Framework websites I've been looking at. For example, MaterializeCSS uses JQuery to hide and show the side-nav.
<nav>
<div class="nav-wrapper">
<a href="#!" class="brand-logo">Logo</a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">Javascript</a></li>
<li><a href="mobile.html">Mobile</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">Javascript</a></li>
<li><a href="mobile.html">Mobile</a></li>
</ul>
</div>
</nav>
<script>$(".button-collapse").sideNav();</script>
Another example (what I'm currently stuck on) is their modal dialog.
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal bottom-sheet">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
</div>
</div>
$(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal').modal();
});
I have tried to see what's involved with calling the .modal() function from wihtin my controller, but it looks like it's a function that is returned from the JQuery selector. For functions that chain off the JQuery selector, is there no other way to invoke them, other than writing a directive and using JQuery in the directive? Or can I replace the JQuery usage with the element.bind and element.$apply stuff, invoking the UI Framework functions with the built in Angular element object? If not, do I have to worry about any life-cycle management since I'm interacting with the DOM through JQuery? I've read a couple of posts, but none seem to answer my question because they don't address 3rd party functions chained off JQuery.
