刷新与AngularJS /离子电池状态离子、电池、状态、AngularJS

由网友(兽性打败理性)分享简介：我的应用离子显示一个HTML元素的电池电量＆LT;＆进度GT;＆LT; /进度方式＆gt; 我的问题是，电池的状态将不会更新后，如果我改变了页面或打开新的一页。在这种情况下是状态始终为零。当我启动应用程序的启动页面上的应用程序看起来像这样的状态（现在完全充电）：当我改变页面左右（目前的状态不叫）：我的...

我的应用离子显示一个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; 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 ；发布时间：2023-09-13 04:15:08