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鏈接的第三方功能。