1
我正在Angular 1中构建应用程序，并且看到我不应该直接与DOM进行交互，而是应该构建自定义指令来处理该交互。对于一般的Web开发，我有点新意，所以我不确定我将如何翻译在我一直关注的所有UI Framework网站上的文档中给出的JQuery示例。例如，MaterializeCSS使用jQuery到hide and show side-nav。使用基于JQuery的UI框架的角度应用程序
<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>
又如（什么我目前卡上）是他们的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();
});
我试图看看有什么参与呼吁从wihtin我控制器.modal()功能，但它看起来像它的一个从JQuery选择器返回的函数。对于链接JQuery选择器的函数，除了编写指令并在指令中使用JQuery之外，没有其他方式可以调用它们吗？或者我可以用element.bind和element.$apply的东西来替换JQuery的用法，调用带有内置Angular element对象的UI Framework函数？如果不是，我是否需要担心任何生命周期管理，因为我通过JQuery与DOM交互？我有read夫妇of posts，但似乎没有人回答我的问题，因为他们没有解决与JQuery链接的第三方功能。