私はAngular 1でアプリケーションを構築していますが、DOMと直接やりとりする必要はありませんが、その対話を処理するカスタムディレクティブを作成するはずです。私は一般的にWeb開発に少し新しかったので、私が見てきたすべてのUI Framework Webサイトのドキュメンテーションに与えられたJQueryの例をどのように翻訳するのか分かりません。たとえば、MaterializeCSSはJQueryを使用してhide and showサイドナビゲータを使用します。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から連鎖されたサードパーティの機能に対処していないので、誰も私の質問に答えてくれないようです。