AngularJSのDirectiveを理解する. - Qiita
はじめに ディレクティブは、AngularJSにおいて、ViewとModelの双方向バインドを実現するための根幹的な仕組みである。 ディレクティブは、開発者から見ると、Templateの要素・属性として現れる。 例えば、テキストボックスの入力値とscope.nameを紐付ける場合、Angularではhtmlに下記を記述するだけで、ユーザの入力値がscopeへ即時反映される。 上記コードの"ng-model"はAngularにデフォルトで組み込まれたディレクティブである。 もちろん、htmlの文法上は、ng-modelという名称の属性はinputタグには存在しない。Angularが独自にng-model属性を解釈して、双方向バインディングの機能を実現しているのである(Angularでは、これを「html文法の拡張」と呼んでいる)。 ディレクティブには、ng-repeatや{{...}}等、様
AngularJSのCompileとLinkってなぁに？ - Qiita
はじめに AngularJSのDirectiveについては、カスタムディレクティブの作成方法含め、おおよそ理解していたつもりであったが、CompileとLinkについて、若干自信が無い部分があったので、勉強がてら少し厚めに書いてみた。 なお、公式の開発ガイドにも、Oreillyの書籍でも書かれているが、カスタムディレクティブを開発することがあっても、殆どのケースでは、Linkの処理のみを気にするだけでよいため、あんまりこのエントリは役には立ちません。 おさらい 「AngularJSのDirectiveを理解する」にも書いているが、ざっくり言うと、Angularのディレクティブがテンプレートから実際のViewを描画する際は、Compile → Linkの2フェーズに分かれている。 Compile：ディテクティブのテンプレート(html文字列ではなく、DOMオブジェクト)から、Link関数を生
何となく分かった気持ちになる AngularJS のカスタムディレクティブ - Qiita
カスタムディレクティブを作るに当たって、覚えておくプロパティがいくつかある。 ディレクティブ ng_service/$compile プロパティ一覧にすると restrict priority template templateUrl replace transclude scope controller require compile link となっている。 相変わらず公式の説明が取っつきづらく、かつ意外と奥が深いので、かみ砕きつつサンプルと一緒に載せておく。 ちなみに AngularJSアプリケーション開発ガイド はわりと役に立つので AngularJS をやるならおすすめの一冊です。 Ebook 版を買っていたのに書籍版も何故か買ってしまったので誰か書籍版を僕から買い取ってください。 restrict HTML 側でディレクティブを呼び込むための形式を定義するプロパティ 複数指定も
AngularJSの基本的なカスタムディレクティブの作成方法 | VPSサーバーでWebサイト公開 備忘録 ~Linux、MySQLからAJAXまで
サンプルコードを使ってAngularJSの基本的なカスタムディレクティブの作成方法をまとめてみました。 デモとコードサンプルはこちら。 （１）サンプルコードの仕様 商品リストを表示する下記内容を”productsList”という名前でカスタムディレクティブを使って書き換えてみます。 （カスタムディレクティブ未使用） <div ng-controller="cus1Ctrl"> <ol> <li ng-repeat='item in products'> {{item.product_name}} ： {{item.price | number:0}}円 </li> </ol> </div> （カスタムディレクティブ使用） <div ng-controller="cus1Ctrl"> <div products-list="products"></div> </div> （２）カスタムディレ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
