angularjs - ng cordova camera

Actualización del estado de la batería con AngularJS/Ionic

Question

Mi aplicación Ionic muestra el nivel de batería en un elemento HTML <progress></progress> .

Mi problema es que el estado de la batería no se actualizará si cambio las páginas o si abro una página nueva. En el caso es el estado siempre cero.

Cuando lance la aplicación en la página de inicio de la aplicación, se ve el estado así (ahora está completamente cargado):

cuando cambio las páginas para que (el estado actual no se llame):

Mi pregunta es, ¿cómo puedo actualizar / actualizar el estado de la batería en todas las páginas?

La otra pregunta es, ¿cómo puedo agregar el porcentaje actual del estado de la batería en el elemento <progress> ? me gusta:

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

He hecho una solución simple para esto. Primero agregue un estado de batería de complemento.

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

});

Este evento de batería se dispara cuando el porcentaje de carga de la batería cambia al menos en un 1 por ciento, o si el dispositivo se enchufa o desenchufa. Así podemos actualizar el valor de batteryLevel mediante una sintaxis de enlace bidireccional angular.

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>

El porcentaje se puede mostrar en la barra de progreso agregando una etiqueta div adicional.