2016-11-15 12 views
1

私は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.bindelement.$applyのものでJQueryの使用法を置き換えて、組み込みのAngular elementオブジェクトでUI Framework関数を呼び出すことはできますか?そうでない場合は、JQueryを使用してDOMとやり取りしているので、ライフサイクル管理について心配する必要はありますか?私はreadカップルof postsを持っていますが、彼らはJQueryから連鎖されたサードパーティの機能に対処していないので、誰も私の質問に答えてくれないようです。

答えて

1

角のあるユーザーは、大きなコミュニティに大きな恵まれています。人気のあるJqueryプラグインごとに用意されたAngularラッパーを見つけることができます。

GoogleにMaterializeCSS Angularと入力すると、このプラグインangular-materializeが見つかったので、JqueryバージョンよりもAngularアプリに統合する方が簡単です。

興味があれば、彼のソースコードを読んで、特定のコンポーネントをAngularディレクティブにラップする方法を学ぶことができます(

など)。
関連する問題