画像を全画面表示する - Angular Fullscreen
Angular Fullscreenを利用することで、クリックすると、その画像を全画面表示するためのしくみを実装できます。HTML5のFullscreen APIを利用したライブラリです。
Angular Fullscreenは、Bowerを利用することで、以下のコマンドでインストールできます。
> bower install --save angular-fullscreen
では、具体的な例も見ていきましょう。
リスト3 fullscreen.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS</title>
<script src="bower_components/angular/angular.min.js"></script>
<!-- （1）ライブラリをインポート-->
<script src="bower_components/angular-fullscreen/src/angular-fullscreen.js"></script>
<script src="scripts/fullscreen.js"></script>
</head>
<body ng-controller="MyController">
<div style="width: 300px">
<!-- （3）画像クリックで全画面モードに切替 -->
<img id="unflower" src="photo/Sunflower.jpg" style="width:100%;" fullscreen /> 画像クリックで全画面表示<br />
<hr />
<!-- （4）ボタンクリックで全画面モードに切替 -->
<img id="sunflower" src="photo/Sheep.jpg" style="width:100%;"
fullscreen="flag" only-watched-property />
<button ng-click="onfull()">全画面表示</button>
</div>
</body>
</html>
リスト4 fullscreen.js
// （2）FBAngularモジュールへの依存関係を設定
angular.module('myApp', ['FBAngular'])
.controller('MyController', ['$scope', 'Fullscreen', function($scope, Fullscreen) {
$scope.flag = false;
// （4）fullscreen属性の値（true／false）を反転
$scope.onfull = function() {
$scope.flag = !$scope.flag;
};
}]);
Angular FullScreenを利用するには、ライブラリ本体（angular-fullscreen.js）をインポートした上で（1）、アプリモジュール（myApp）からはFBAngularモジュールへの依存関係を宣言します（2）。
あとは、対象となる要素に対してfullscreen属性（値なし）を付与することで、画像クリックによって全画面モードに切り替わるようになります（3）。
もしくは、（4）のようにfullscreen属性に対して、値を渡すこともできます。この場合、変数flagがtrueになったところで、全画面モードに切り替えます。サンプルでは、ボタンクリックのタイミングで変数flagを反転（＝全画面モードに切り替え）させています。
なお、only-watch-property属性は、fullscreen属性に指定された変数の値によってのみ、全画面モードに切り替えることを意味します。つまり、画像のクリックでは全画面モードにはなりません。
