AngularJS TIPS
モデルをバインドするテンプレートを指定するには？（ng-bind-template）
AngularJSのディレクティブであるng-bind-template属性を使って、{{...}}エクスプレッションを含むテンプレートをビューにバインドする方法を説明する。
別稿「TIPS：モデルをビューにバインドするには？」では、ng-bind属性などを使って、与えられたモデル（＝スコープオブジェクトのプロパティ）をビューにバインドする方法を説明しています。これに対して、{{...}}エクスプレッション（＝式）を含むテンプレートをビューにバインドするのがng-bind-template属性（ディレクティブ）です。
まずは、具体的なサンプルを確認してみましょう。
|
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body ng-controller="MyController">
<p>
<label for="greeting">挨拶：</label><br />
<input id="greeting" name="greeting" type="text" ng-model="greeting" />
</p>
<p>
<label for="name">名前：</label><br />
<input id="name" name="name" type="text" ng-model="name" />
</p>
<div ng-bind-template="{{greeting}}、{{name}}さん！"></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script>
angular.module('myApp', [])
.controller('MyController', ['$scope', function($scope) {
$scope.greeting = 'こんにちは';
}]);
</script>
</body>
</html>
|
この例であれば、ng-bind属性を利用して、以下のように書いても同じ意味になります。
|
<div>
<span ng-bind="greeting"></span>、
<span ng-bind="name"></span>さん！
</div>
|
本稿のサンプルのようなケースであれば、ng-bind属性を利用した方がシンプルです。ng-bind-template属性を利用するのは、<title>／<option>要素のように、配下に<span>のような子要素を利用できない場合です。
- *1 ちなみに前掲の別稿に示した
ng-bind属性サンプルにならうと、モデルの前後に文字列を付加して<div ng-bind="greeting + '、' + name + 'さん！'"></div>のようにも記述できます。このように記述した場合、トリッキーではありますが<title>／<option>要素に複数のモデルを指定してバインドすることは不可能ではありません。しかし通常は、ng-bind属性には1つのモデルを直接指定することが推奨されるため、複数のモデルにバインドする場合には、上記のコード例で示したように<span>などの子要素を使った書き方になります。
処理対象：データバインディング（Data Binding） カテゴリ：基本
API：ngBindTemplate（ng-bind-template）｜ngBind（ng-bind） カテゴリ：ng（コアモジュール） > directive（ディレクティブ）
※以下では、本稿の前後を合わせて5回分（第56回～第60回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
56. AngularJSの管理外でサービスを注入するには？（$injector）
AngularJSの管理外でも、$injectorサービスを使ってサービスを手動でインスタンス化することで、AngularJSが提供するサービスを利用できる。その基本的な利用方法を説明する。
57. $injectorサービスでサービスの取得／存在確認を行うには？（$injector）
AngularJSの管理外でサービスを手動でインスタンス化して利用できる$injectorサービスの応用的な活用方法として、has／get／instantiateメソッドを解説する。
58. 【現在、表示中】≫ モデルをバインドするテンプレートを指定するには？（ng-bind-template）
AngularJSのディレクティブであるng-bind-template属性を使って、{{...}}エクスプレッションを含むテンプレートをビューにバインドする方法を説明する。
59. 画像を動的に生成するには？（ng-src／ng-srcset）
＜img＞タグのng-src属性に指定する画像リソースのURLをAngularJSのスコープオブジェクト経由で完成させることで、動的に画像を表示する方法を説明する。
60. 不正な入力値もモデルに反映させるには？（ng-model-options）
入力フォームに検証機能を付けた場合、デフォルトでは不正値はモデルに反映されない。この制限を回避して反映させる方法を説明する。
