[ionic][cordova]バッテリーアイコンをCSSで表示する

ionicで下記のようなバッテリーアイコンをCSSで表示する方法です。
<img width="46" alt="battery.png" src="https://qiita-image-store.s3.amazonaws.com/0/92492/a8665215-0273-cdfd-0908-b7bf38aadc69.png">
ネイティブのapiより、端末の電池の残量を取得して表示します。
電池残量が30%以下で黄色、10%以下で赤くなります。
<img width="41" alt="battery2.png" src="https://qiita-image-store.s3.amazonaws.com/0/92492/970fbf06-cfaa-0104-24a0-f5642b1e3a4c.png">


#1.プラグインを取り込む準備をする。
```bower.json
{
        :
  "dependencies": {
    "angular-translate": "~2.7.2",
    "angular-translate-handler-log": "~2.7.2",
    "angular-translate-loader-static-files": "~2.7.2",
    "ngCordova": "~0.1.23-alpha"  /* ここを追加 */
  }
        :
}
```

```package.json
{
        :
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "com.ionic.keyboard",
    "cordova-plugin-battery-status"  /* ここを追加 */
  ],
        :
}
```

#2.プラグインを取り込み、環境を再構築する。
`npm install`
`ionic state restore`

#3. cordovaプラグインより電池のステータスを取得する
```app.js
application.run(function($ionicPlatform, $cordovaBatteryStatus, $rootScope) {
  $ionicPlatform.ready(function() {

  $rootScope.$on('$cordovaBatteryStatus:status', function (event, args) {
    $rootScope.batteryLevel = args.level;       // (0 - 100)
  });

  $rootScope.$on('$cordovaBatteryStatus:critical', function (event, args) {
    $rootScope.batteryLevel = args.level;       // (0 - 100)
  });

  $rootScope.$on('$cordovaBatteryStatus:low', function (event, args) {
    $rootScope.batteryLevel = args.level;       // (0 - 100)
  });
});

```

#4. ディレクティブを作成する
```battery-icon.js
service.directive("batteryIcon", function () {
  return {
    restrict: "E",
    scope: {
      level: '@level'
    },
    template: `
      <style type="text/css">
        .battery-width::before{width: {{level/100}}em;}
      </style>
      <div class="battery-full battery-width" ng-class="{yellow:level>10 && level<=30, red:level<=10}"></div>
    `,
  }
});
```

```hage.css
.battery-full {
	font-size: 16px;
	position: relative;
	margin-top: 0.3em;
	width: 1.6em;
	height: 1.2em;
	background:
		linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 0em 0em / 1.3em 0.1em no-repeat,
		linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 1.3em 0em / 0.1em 0.2em no-repeat,
		linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 1.3em 0.2em / 0.3em 0.1em no-repeat,
		linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 1.5em 0.2em / 0.1em 0.5em no-repeat,
		linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 1.3em 0.7em / 0.32em 0.1em no-repeat,
		linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 1.3em 0.8em / 0.1em 0.2em no-repeat,
		linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 0em 0.9em / 1.3em 0.1em no-repeat,
		linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 0em 0em / 0.1em 0.9em no-repeat
	;
}
/* 残り */
.battery-full::before {
	content: "";
	position: absolute;
	top: 0.15em;
	left: 0.13em;
	height: 0.65em;
	background-color: #39a9d6;
}
.battery-full.red::before{
	background-color: #f6564a;
}
.battery-full.yellow::before{
	background-color: #f6a646;
}
```

#5.ディレクティブを使用する
```hage.html
<battery-icon level="{{batteryLevel}}"></battery-icon>
```