CodeZine(コードジン)

特集ページ一覧

AngularJSのDOMイベント処理と注意すべきディレクティブを知り、HTMLテンプレートを使いこなそう

AngularJSで初めるJavaScriptフレームワーク開発スタイル 第8回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2015/05/07 14:00
目次

その他のディレクティブ

 これまで紹介したディレクティブ以外にも、より便利なディレクティブや、AngularJS特有の問題の回避をするためのディレクティブなどがあります。

 AngularJSでは多くのディレクティブが用意されているために、一通りの使用方法を理解するのも大変ですが、これから紹介するディレクティブは慣れてきたら是非知っておきたいものになります。

外部のテンプレートファイルをテンプレート部品として読み込むディレクティブ - ngInclude

 ngIncludeは、HTMLテンプレートを部品化したり、大きなテンプレートを分割するために利用します。外部のテンプレートも通常のテンプレート同様に記述ができます。リスト3は、ngIncludeを使用したサンプルです。

リスト3 ngIncludeの利用例(nginclude.htmlの抜粋とsub_nginclude.htmlの抜粋)
// nginclude.htmlの抜粋
<div ng-init="hello = 'こんにちは'"></div>
<div ng-include="'sub_nginclude.html'"></div>
<!--(1)変数を利用したインクルード -->
<div ng-init="file = 'sub_nginclude.html'"></div>
<div ng-include="file"></div>

//  sub_nginclude.htmlの内容
<div>{{hello}}</div>

 固定的なインクルードだけではなく、(1)のように変数を利用したインクルード処理もできるので、簡単な表示の切り分けなどにも利用可能です。

定型文言を切り替えて表示するディレクティブ - ngMessages

 ngMessagesは、エラーメッセージやアプリケーション内で共通的に利用するメッセージなどを、テンプレートとして状況に合わせて切り替えて表示するためのディレクティブです。

 ngSwitchやngShow/ngHideなど利用しても同じようなことを実現できますが、よりシンプルな記述で利用できるようになっています(*)。

注釈

*)ngMessagesはAngularJS 1.4で一部の構文が変更されています。詳しくは、次回の記事で解説します。

 リスト4はngMessagesのシンプルな利用例と、メッセージのテンプレート化と同時に複数のメッセージを表示するコード例です。

リスト4 ngMessagesの利用例(ngmessages.htmlの抜粋)
<!--(1)単純な利用例 -->
<div ng-init="pref = {tokyo : true};"></div>
<div ng-messages="pref">
    現在地は「
    <span ng-message="tokyo">東京都</span>
    <span ng-message="okinawa">沖縄県</span>
    」です
</div>
<!--(2)再利用する文言をテンプレートとして定義 -->
<script type="text/ng-template" id="err-messages">
    <div ng-message="required">入力がありません</div>
    <div ng-message="numeric">数値で入力してください</div>
    <div ng-message="maxvalue">{{maxval}}以下で入力してください</div>
</script>

<h4>エラー内容</h4>
<!--(3)テンプレートの指定と、複数表示を指定する -->
<div ng-init="errors = {required : false, numeric : true, maxvalue : true}; maxval = 100;"></div>
<div ng-messages="errors" ng-messages-multiple ng-messages-include="err-messages" class="errors">
</div>

 ngSwitchのような単純なケースでの利用の場合には(1)のように記述します。サンプルでは、ng-messagesに表示を制御する為の変数名であるprefを指定しています。

 続いてエラーメッセージなどを表示する場合のように、メッセージの外部定義と複数のメッセージを表示する例です。

 (2)では再利用するための文言をテンプレートとして定義しています。この定義は説明上直前に定義していますが、idで取得できればどこに記述しても問題ありません。

 (3)では、先ほど指定したテンプレート名をng-messages-includeで指定し、複数の項目を表示するためにng-messages-multipleを指定します。この指定を行わないと最初に一致したメッセージのみが表示されます。

 また、ngMessagesは外部モジュールとなっているので、angular-messages.jsもしくはangular-messages.min.jsを読みこむことと、ngMessagesのモジュールをリスト5のようにロードすることが必要です。

リスト5 ngMessagesモジュールのロード(ngmessages.htmlの抜粋)
var app = angular.module('app',['ngMessages']);
図2 ngMessagesの実行結果
図2 ngMessagesの実行結果

hrefやsrcなどの属性を指定するディレクティブ - ngSrc/ngHref

 imgタグやaタグなどでパスを指定する場合にsrcやhrefに値を設定しますが、AngularJSによって{{式}}がパースされる前にこれらの属性があると、ブラウザはそのための処理をしてしまいます。従って、{{式}}の文字列のまま意図しないURLにアクセスすることになってしまい、結果的にアクセスエラーになってしまいます。この問題を回避するためのディレクティブがngSrcとngHrefです。

 リスト6は、通常のsrc属性とngSrc属性を使った時のサンプルコードで図3のように、src属性の場合には一瞬だけ画像エラーが表示されてしまう場合がありますが、ngSrcを使えばこの問題が回避できます。また、HTML5ではimgタグはsrcsetという属性もサポートしていますが、その場合にはngSrcsetディレクティブがあるのでそちらを使います。

リスト6 ngSrcの使用例(ngsrc.htmlの抜粋)
<div ng-init="url = '../img/sample.png'"></div>
<img src="{{url}}" />
<img ng-src="{{url}}" />
図3 ngSrcの実行結果
図3 ngSrcの実行結果

 同様にhref属性がパース前にリンクが有効にならないようにngHrefディレクティブがありリスト7のように利用できます。

リスト7 ngHrefの使用例(nghref.htmlの抜粋)
<div ng-init="type = 'type'"></div>
<a href="#/{{type}}">パース前にリンクが有効になる例</a><br />
<a ng-href="#/{{type}}">パース後にリンクが有効になる例</a>

記述したままのコードを表示するためのディレクティブ - ngNonBindable

 ngNonBindableディレクティブは、{{式}}のような指定をAngularJSでのテンプレート機能を使わず、そのまま文字列として出力したい場合に使用します。

リスト8 ngNonBindableの利用例(ngnonbindable.htmlの抜粋)
<div ng-non-bindable>
    <p>{{hoge}}</p>
    <p>{{hello}} world!</p>
</div>
図4 ngNonBindableの実行結果
図4 ngNonBindableの実行結果

  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:AngularJSではじめるJavaScriptフレームワーク開発スタイル

もっと読む

著者プロフィール

  • WINGSプロジェクト 小林 昌弘(コバヤシ マサヒロ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。個人紹介主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしど...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5