Javascript Angular应用程序使用基于JQuery的UI框架

我正在Angular 1中构建一个应用程序，并且已经看到我不应该直接与DOM交互，而是应该构建自定义指令来处理该交互。一般来说，我对web开发有点陌生，所以我不确定如何翻译我所看到的所有UI框架网站的文档中给出的JQuery示例。例如，MaterializeCSS使用JQuery对侧导航进行查询

<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>

$（“.button collapse”）.sideNav（）；

另一个例子（我目前一直坚持）是他们的

模态头
一串文字

$（文档）.ready（函数（）{
//.modal触发器的“href”属性必须指定要触发的模态ID
$（'.modal'）.modal（）；
});

---

我已经尝试过从我的控制器中的wihtin调用

.modal（）

函数，但是它看起来像是一个从JQuery选择器返回的函数。对于脱离JQuery选择器的函数，除了编写指令并在指令中使用JQuery之外，没有其他方法调用它们吗？或者我可以用

元素.bind

和

元素.$apply

stuff替换JQuery的用法，用内置的

元素

对象调用UI框架函数吗？如果不是，我是否需要担心生命周期管理，因为我正在通过JQuery和DOM交互？我有几个，但似乎没有人回答我的问题，因为他们没有解决与JQuery链接在一起的第三方功能。

Angular用户拥有一个很大的社区，你几乎可以为每个流行的JQuery插件找到现成的Angular包装器

通过在Google中键入

MaterializeCSS Angular

，我找到了这个插件，它应该比Jquery版本更容易集成到Angular应用程序中

如果您感兴趣，可以阅读他的源代码，了解如何将特定组件包装到Angular指令中，例如

<!-- 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();
});