刷新与AngularJS /离子电池状态 [英] Refreshing the battery status with AngularJS/Ionic
问题描述
我的应用离子显示一个HTML元素的电池电量＆LT;＆进度GT;＆LT; /进度方式＆gt;
我的问题是，电池的状态将不会更新后，如果我改变了页面或打开新的一页。在这种情况下是状态始终为零。
当我启动应用程序的启动页面上的应用程序看起来像这样的状态（现在完全充电）：
![在这里输入的形象描述](\"http://i.stack.imgur.com/1Zoyo.png\")
当我改变页面左右（目前的状态不叫）：
![在这里输入的形象描述](\"http://i.stack.imgur.com/Owk6N.png\")
我的问题是，我怎么可以更新/刷新页面每次对电池的状态？
另一个问题是，如何可以我想补充的电池状态在当前百分比＆LT;进度＆GT; 元素？这样的：
![在这里输入的形象描述](\"http://i.stack.imgur.com/HcDvB.png\")
HTML
＆LT;进步NG控制器=batteryController最大=100值={{batteryLevel}}＆GT;
＆LT; /进度＆GT;
JavaScript的：
myApp.controller（batteryController功能（$范围，$ rootScope，$ ionicPlatform，$ cordovaBatteryStatus）{
$ ionicPlatform.ready（函数（）{
$ rootScope在$（$ cordovaBatteryStatus：状态功能（事件参数）{
的console.log（参数）;
$ scope.batteryLevel = args.level;
的console.log（$ scope.batteryLevel）;
$ scope.isPluggedIn = args.isPlugged;
的console.log（$ scope.isPluggedIn）;
}）;
$ rootScope在$（'$ cordovaBatteryStatus：关键'，函数（事件参数）{
$ scope.batteryLevel = args.level; //（0 - 100）
$ scope.isPluggedIn = args.isPlugged; //布尔
}）; $ rootScope在$（'$ cordovaBatteryStatus：低，功能（事件参数）{
$ scope.batteryLevel = args.level; //（0 - 100）
$ scope.isPluggedIn = args.isPlugged; //布尔
}）;
}）;
}）;
CSS：
/ *所有HTML5进度功能的浏览器* /
进度{ / *关闭造型 - 通常并不需要，但好知道。 * /
外观：无;
-moz-外观：无;
-webkit-外观：无;
/ *在Firefox和Opera摆脱默认边框的。 * /
边界：固体#CCCCCC为5px;
边界半径：10px的;
/ *尺寸* /
宽度：100像素;
高度：40像素;
}/ *填充工具* /
进展[作用]：{后
背景图片：无; / *删除默认的背景从填充工具* /
}/ *
*进度栏背景背景
* // * Firefox和填充工具* /
进度{
！背景：#CCCCCC重要; / *！重要仅需要填充工具* /
}/ * *铬/
进度:: - WebKit的进度条{
背景：#CCCCCC;
}/ *
*进度条值的背景
* // * *火狐/
进度:: - MOZ-进度条{
边界半径：5像素;
背景图片：-moz-线性渐变（
中心底部，
RGB（43,194,83）37％，
RGB（84,240,84）69％
）;
}/ * *铬/
进度:: - WebKit的进步价值{
边界半径：5像素;
背景图片：-webkit-梯度（
线性，
左下，
左上角，
颜色停止（0，RGB（43,194,83））
颜色停止（1，RGB（84,240,84））
）;
背景图片：-webkit-线性渐变（
中心底部，
RGB（43,194,83）37％，
RGB（84,240,84）69％
）;
}/ *填充工具* /
进展[咏叹调-valuenow]：前{
边界半径：5像素;
背景图片：-moz-线性渐变（
中心底部，
RGB（43,194,83）37％，
RGB（84,240,84）69％
）;
背景图片：-ms线性梯度（
中心底部，
RGB（43,194,83）37％，
RGB（84,240,84）69％
）;
背景图片：-o-线性渐变（
中心底部，
RGB（43,194,83）37％，
RGB（84,240,84）69％
）;
}
我已经为this.First一个简单的解决方案添加一个插件电池状态
科尔多瓦插件添加科尔多瓦 - 插件 - 电池状态
的JavaScript
myApp.controller（'batteryController'，函数（$范围，$ ionicPlatform）{ $ ionicPlatform.ready（函数（）{
window.addEventListener（电池状态，onBatteryStatus，FALSE）; 功能onBatteryStatus（INFO）{
info.level;
percentageChanged（info.level）; }
}）; 功能percentageChanged（值）{
$ scope.batteryLevel =价值;
};
}）;
时的电池电量变化至少1％的比例，或者如果设备或插入unplugged.So我们可以通过角双向绑定语法更新batteryLevel值这个电池状态事件触发。
HTML
＆LT;离子查看查看标题=菜单＆GT;
＆LT;离子内容类=填充＆GT;
＆LT; DIV的风格=的位置是：绝对的;文本对齐：中心;宽度：100％;填充：13px的;＆GT; {{batteryLevel}}％
＆LT; / DIV＆GT;
＆LT;进步最大=100值={{batteryLevel}}→100
＆LT; /进度＆GT;
＆LT; /离子含量＆GT;
＆LT; /离子视图＆gt;
百分比可以通过添加额外的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 /离子电池状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
