タイトルは、AngularJとBootstrapの組み合わせを設定して、実際にはBootstrapのスタイルであるAccordionメニューを実装しています。
前の記事では、Angular.jsとBootstrapの組み合わせを紹介して、テーブルページネーションコードを実装しました。次に、実装されたデモを学びます。
主にカスタムコマンドを実践し、パラメーターをコマンドに渡すと、最初に古いルールが使用されます。
<my-page ng-repeat = "expanders" page-title = "item.title"> {{item.text}} </my-page>上記は私のカスタマイズされたコマンドです。メニューには3つのタイトルとコンテンツがあり、ng-repeatを使用してレンダリングします。
基本命令APIは次のとおりです。
app.directive（ 'myDirective'、function（）{return {// restrict：default is a（属性、デフォルト値）<div my-directive = ''> </div> e（class name）c（comment）m（comment）//ブラウザー互換性、通常、ブローダーが知っている '' '' 'a' a 'a' a 'a' a 'a is ais as ais as ais as eming aid as eming as eming int aight aight aight aight eming es in browserただし、コマンドの優先順位よりも低い現在の要素の実行を停止するために使用されます。テンプレート//関数（Telement、Tattrs）{...}テンプレート： ''、//指定されたURLアドレステンプレートからテンプレートテンプレートをロードするテンプレート： ''、// other Injectables）{...}コントローラー： ''、// controlleras： ''、controlleras： ''、require： ''、//リスナーなどの追加を含むプログラムでdomを操作します。リンク：function postlink（scope、iElement、iattrs）{}、//コンパイル：//オブジェクトまたは接続を返します。 iElement、iattrs、コントローラー）{}、post：function（scope、ielment、iattrs、controller）{}} //またはreturn function postlink（）{}};};}）切り替えるときに他の人を隠す方法は？コマンドng-showの主な使用は、現在のクリックを記録して他のクリックを非表示にすることです。
特定のコードコメントは次のとおりです。
<style type = "text/css">。con {margin：0 auto; width：600px; margin-top：100px;}。パネル{width：580px;} href = "http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"/> <div ng-app = "myapp" ng-controller = "myctrl"> <my-page ng-repeat = "excanders" " Page-Title = "item.title"> {{item.text}} </my-page> </div> <script src = "http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/Angular.js"> </script = "Text/Javascript"> var []）; app.directive（ 'mypage'、function（）{return {restrict： 'ea'、falling：true、transclude：true、//要素コンテンツをテンプレートスコープに転送するかどうか：{title： "= pagetitle"}、テンプレート：['<div>'、 '<div ng-click = "toggle > {{title}} </h3> '、' </div> '、' <div ng-show = "showme" ng-transclude> </div> '、' </div> '] function toggle（）{scope.showme =！scope.showme; Heveryなどが多くのGoogle製品で使用されている優れたフロントエンドのフレームワークがあります。 CSS3と互換性があり、さまざまなブラウザ（すなわち6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+）、JQuery 2.0、およびそれ以降のバージョンは、IE6/7/8ブラウザーをサポートすることができなくなります。 jqueryは、そのドキュメントが非常に包括的であることがあり、さまざまなアプリケーションも詳細に説明しています。 「TwitterのBootstrapは、HTML、CSS、および柔軟性があるもので、Web開発をより速く開発しています。 CSS言語は、NASAのMSNBC（Microsoft National Broadcasting Corporation）を含む、常に人気のあるオープンソースプロジェクトでした$ scope.addexpander = function（expander）{exlanders.push（expander）;}; $ scope.gotoexpander = function（selectedexpander）{encoders.foreach（quant（item、index）{if（item！= selectedexpander）{//非通信タブ項目を非表示に