使用AngularJS / Ionic刷新电池状态 [英] Refreshing the battery status with AngularJS/Ionic
本文介绍了使用AngularJS / Ionic刷新电池状态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
Ionic应用程式会在HTML元素< progress>< / progress> 中显示电池电量。
我的问题是，如果我更改页面或打开新页面，电池的状态将不会更新。
当我在应用程序的开始页面上启动应用程序时，会看到如下状态（现在已充满电）：
p>
当我更改页面时未调用）：
我的问题是，如何更新/刷新每一页的电池状态？
另一个问题是， < progress> 元素中电池状态的当前百分比？例如：
HTML：
< progress ng-controller =batteryControllermax =100value ={{batteryLevel}}>
< / progress>
JavaScript：
code> myApp.controller（batteryController，function（$ scope，$ rootScope，$ ionicPlatform，$ cordovaBatteryStatus）{
$ ionicPlatform.ready（function（）{
$ rootScope。 （$ scope $ batteryStatus：status，function（event，args）{
console.log（args）;
$ scope.batteryLevel = args.level;
console.log batteryLevel）;
$ scope.isPluggedIn = args.isPlugged;
console.log（$ scope.isPluggedIn）;
}）;
$ rootScope。$ on（'$ cordovaBatteryStatus ：critical'，function（event，args）{
$ scope.batteryLevel = args.level; //（0 - 100）
$ scope.isPluggedIn = args.isPlugged; // bool
$ rootScope。$ on（'$ cordovaBatteryStatus：low'，function（event，args）{
$ scope.batteryLevel = args.level; //（0 - 100）
$ scope.isPluggedIn = args.isPlugged; // bool
}）;
}）;
}）;
CSS：
code> / *所有支持HTML5进度的浏览器* /
进度{
/ *关闭样式 - 通常不需要，但很好知道。 * /
appearance：none;
-moz-appearance：none;
-webkit-appearance：none;
/ *摆脱了Firefox和Opera中的默认边框。 * /
border：solid #cccccc 5px;
border-radius：10px;
/ * Dimensions * /
width：100px;
height：40px;
}
/ * Polyfill * /
progress [role]：after {
background-image：none; / *从polyfill中删除默认背景* /
}
/ *
*进度条背景的背景
* /
/ * Firefox和Polyfill * /
进度{
背景：#cccccc！important; / *！important只需要在polyfill * /
}
/ * Chrome * /
progress :: - webkit-progress-bar {
background：#cccccc ;
}
/ *
*进度条背景
* /
/ * Firefox * /
进度:: - moz-progress-bar {
border-radius：5px;
background-image：-moz-linear-gradient（
中心底部，
rgb（43,194,83）37％，
rgb（84,240,84）69％
）;
}
/ * Chrome * /
progress :: - webkit-progress-value {
border-radius：5px;
background-image：-webkit-gradient（
linear，
left bottom，
left top，
color-stop（0，rgb（43,194,83）） ，
color-stop（1，rgb（84,240,84））
）;
background-image：-webkit-linear-gradient（
中心底部，
rgb（43,194,83）37％，
rgb（84,240,84）69％
）;
}
/ * Polyfill * /
progress [aria-valuenow]：before {
border-radius：5px;
background-image：-moz-linear-gradient（
中心底部，
rgb（43,194,83）37％，
rgb（84,240,84）69％
）;
background-image：-ms-linear-gradient（
中心底部，
rgb（43,194,83）37％，
rgb（84,240,84）69％
）;
background-image：-o-linear-gradient（
中心底部，
rgb（43,194,83）37％，
rgb（84,240,84）69％
）;
}
解决方案
首先添加一个插件电池状态
cordova插件add cordova-plugin-battery-status
Javascript
myApp.controller（'batteryController'，function（$ scope，$ ionicPlatform）{
$ ionicPlatform.ready（function（）{
window.addEventListener（batterystatus ，onBatteryStatus，false）;
function onBatteryStatus（info）{
info.level;
percentageChanged（info.level）;
}
}）;
function percentageChanged（value）{
$ scope.batteryLevel = value;
};
}）;
电池充电百分比变化至少1％或者如果设备已插入或拔下电源，我们可以通过有角度的双向绑定语法更新batteryLevel的值。
Html p>
< ion-view view-title =Menu>
< ion-content class =padding>
< div style =position：absolute; text-align：center; width：100％; padding：13px;> {{batteryLevel}}％
< / div>
< progress max =100value ={{batteryLevel}}> 100
< / progress>
< / ion-content>
< / ion-view>
百分比可以通过添加一个额外的div标签显示在进度栏中。
My Ionic app displays the battery level in a HTML element <progress></progress>.
My problem is that the status of the battery will not be updated, if I change the pages or open a new page. In the case is the status always zero.
When I launch the app on the start page of the app looks the status like this (Now is fully charged):
when I change the pages so (the current status is not called):
My question is, how can I update/refresh the status of the battery on every pages?
The other question is, how can I add the current percentage of the battery status in the <progress> Element? like:
HTML:
<progress ng-controller="batteryController" max="100" value="{{batteryLevel}}">
</progress>
JavaScript:
myApp.controller("batteryController", function ($scope, $rootScope, $ionicPlatform, $cordovaBatteryStatus) {
$ionicPlatform.ready(function () {
$rootScope.$on("$cordovaBatteryStatus:status", function (event, args) {
console.log(args);
$scope.batteryLevel = args.level;
console.log($scope.batteryLevel);
$scope.isPluggedIn = args.isPlugged;
console.log($scope.isPluggedIn);
});
$rootScope.$on('$cordovaBatteryStatus:critical', function (event, args) {
$scope.batteryLevel = args.level; // (0 - 100)
$scope.isPluggedIn = args.isPlugged; // bool
});
$rootScope.$on('$cordovaBatteryStatus:low', function (event, args) {
$scope.batteryLevel = args.level; // (0 - 100)
$scope.isPluggedIn = args.isPlugged; // bool
});
});
});
CSS:
/* All HTML5 progress enabled browsers */
progress {
/* Turns off styling - not usually needed, but good to know. */
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
/* gets rid of default border in Firefox and Opera. */
border: solid #cccccc 5px;
border-radius: 10px;
/* Dimensions */
width: 100px;
height: 40px;
}
/* Polyfill */
progress[role]:after {
background-image: none; /* removes default background from polyfill */
}
/*
* Background of the progress bar background
*/
/* Firefox and Polyfill */
progress {
background: #cccccc !important; /* !important only needed in polyfill */
}
/* Chrome */
progress::-webkit-progress-bar {
background: #cccccc;
}
/*
* Background of the progress bar value
*/
/* Firefox */
progress::-moz-progress-bar {
border-radius: 5px;
background-image: -moz-linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
}
/* Chrome */
progress::-webkit-progress-value {
border-radius: 5px;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(43,194,83)),
color-stop(1, rgb(84,240,84))
);
background-image: -webkit-linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
}
/* Polyfill */
progress[aria-valuenow]:before {
border-radius: 5px;
background-image: -moz-linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
background-image: -ms-linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
background-image: -o-linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
}
解决方案 I have made a simple solution for this.First add a plugin battery-status
cordova plugin add cordova-plugin-battery-status
Javascript
myApp.controller('batteryController', function($scope,$ionicPlatform) {
$ionicPlatform.ready(function() {
window.addEventListener("batterystatus", onBatteryStatus, false);
function onBatteryStatus(info) {
info.level;
percentageChanged(info.level);
}
});
function percentageChanged(value) {
$scope.batteryLevel = value;
};
});
This batterystatus event fires when the percentage of battery charge changes by at least 1 percent, or if the device is plugged in or unplugged.So we can update the value of batteryLevel by angular two way binding syntax.
Html
<ion-view view-title="Menu">
<ion-content class="padding">
<div style="position: absolute;text-align: center;width: 100%;padding: 13px;">{{batteryLevel}}%
</div>
<progress max="100" value="{{batteryLevel}}">100
</progress>
</ion-content>
</ion-view>
The percentage can shown in your progress bar by adding an extra div tag.
这篇关于使用AngularJS / Ionic刷新电池状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
