离子电池状态

离子电池状态

关注
发信
关注(28)粉丝(399)

刷新与AngularJS /离子电池状态

本文介绍了刷新与AngularJS /离子电池状态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的应用离子显示一个HTML元素的电池电量＆LT;＆进度GT;＆LT; /进度方式＆gt;

我的问题是，电池的状态将不会更新后，如果我改变了页面或打开新的一页。在这种情况下是状态始终为零。

当我启动应用程序的启动页面上的应用程序看起来像这样的状态（现在完全充电）：

当我改变页面左右（目前的状态不叫）：

我的问题是，我怎么可以更新/刷新页面每次对电池的状态？

另一个问题是，如何可以我想补充的电池状态在当前百分比＆LT;进度＆GT; 元素？这样的：

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; D​​IV的风格=的位置是：绝对的;文本对齐：中心;宽度：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 /离子电池状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-01 18:52
Powered by LMLPHP ©2024 离子电池状态 0.067677