Question

我的Ionic应用程序在HTML元素<progress></progress>中显示电池电量。

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

当我在应用的开始页面上启动应用时看起来像这样的状态（现在已经完全充电）：

当我更改页面时（未调用当前状态）：

我的问题是，如何更新/刷新每个页面上的电池状态？

另一个问题是，如何在<progress>元素中添加电池状态的当前百分比？像：

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%
    );
}

Answer 1

我为此做了一个简单的解决方案。首先添加一个插件电池状态

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;
        };

}）;

当电池电量百分比变化至少1％，或者设备已插入或拔出时，此电池状态事件将触发。因此，我们可以通过角度双向绑定语法更新batteryLevel的值。

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>

通过添加额外的div标记，可以在进度条中显示百分比。

使用AngularJS / Ionic刷新电池状态

1 个答案: