対象読者
- jQueryなどを使っている開発者
- JavaScriptを使った複数人でのプロジェクトに参加している方
- JavaScriptを使ってサーバ等と連携したフロントエンドの開発をしている方
必要な環境
この記事では、AngularJS（バージョン1.4）を使用し、Chrome（43.0）、IE11、Firefox（39.0）、Safari（8.0.7）の環境にて確認を行っています。
また、Bootstrap（バージョン3.3.5）とjQuery（2.1.4）を使用しています。
値の参照のみを行うUIの作成
まず、最初は前回までの復習をかねて、値の参照のみを行う非常に簡単な部品を作成してみます。最初は図1のようにProgres barを部品化します。
まずはBootstrapのマニュアルにあるProgress barのサンプルコードを元にテンプレートをリスト1のように作成します。
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="{{value}}"
aria-valuemin="0" aria-valuemax="100" ng-style="{width : value + '%'}">
<span ng-show="value > 0">{{value}}%</span>
</div>
</div>
このテンプレートの0から100までのvalueの値に応じてバーの長さを変えます。実際にこのディレクティブを使う際には、リスト2のように利用します。
このように、ディレクティブは複雑なタグ要素、または、属性やクラス名などを必要とするHTMLを簡単に管理することができます。
<progressbar value="'20'"></progressbar>
実際に作成したディレクティブ本体のコードがリスト3になります。
(function(){
angular.module('ui.progressbar',[])
.directive('progressbar',[ProgressBar]);
function ProgressBar(){
return {
restrict : 'E',
templateUrl : "js/directives/ProgressBar.html",
scope : {
value : '=' //（1）valueの値はAngularJS式として取得する
},
replace : true //（2）HTMLを置き換える
}
}
}());
前回説明したrestirct、templateUrl、scopeの詳細は割愛しますが、restrictでは要素（E）でのみ指定が可能で、templateUrlは表示するテンプレートのURLです。
また、（1）のようにscopeでは指定したvalue属性の値をAngular式として値のバインディングができるようにします。これで、コントローラなど上位のスコープの値を参照できますので、リスト1のようにコントローラ側で値を変えればプログレスバーを動かす事ができます。
続いて（2）replace属性は指定したテンプレートで要素を置き換えるか否かの指定です。replaceがfalseの場合、progressbar要素の内側にテンプレートを挿入しますが、trueの場合にはすべて書き換えるのでDOM上にはprogressbar要素は残りません。ただし、現在、replace指定はDEPRECATEDになっています。理由としては指定した属性やクラス指定などをテンプレート側の親要素とマージしますが、その実装と制約などが複雑になることと、今後、独自タグがWebComponentとして標準化されていくので、無理に置き換える必要はないであろうというのが理由のようです。
