在 angular js 中使用电池管理器

Question

我正在尝试将电池管理器对象挂接到 angular 控制器，但是当 navigator.getBattery() 的承诺完成时，控制器对象似乎没有更新。这是我想出的

(function(){
var app=angular.module('appBattery',[]);
app.controller('batteryController',['$window',function($window){
this.bat={};
this.level=this.bat.level;
$window.navigator.getBattery().then(function(battery){
    setBattery(battery);
});
function setBattery(battery){
    this.bat=battery;
    console.log(this.bat);
}
console.log(this.bat);
}]);
})();

用这个html

<div ng-app='appBattery'>
<div id="battery-status-bar" ng-controller='batteryController as battery'>
    <div class="battery">
        <div class="power">
        {{battery}}
            <div class="level"></div>
        </div>
    </div>
    <div class="percentage">{{battery.bat.level}}</div>
    <div class="time">{{battery.bat.chargeTime +':'+battery.bat.dischargeTime}}</div>
</div>
</div>

也可以在jsfiddle上找到here

Answer 1

将 battery 分配给 $scope.bat （也在您的控制器中注入 $scope ）。你可能也需要做 $scope.$apply()。几乎用 $scope.

替换 this

Answer 2

您可以将控制器保留为语法。在 https://jsfiddle.net/fnnruzjw/1/ 查看我更新的 fiddle。手头有几个问题：

您需要使用 $scope.$apply.

$window.navigator.getBattery().then(function(battery){
 $scope.$apply(function() {
    setBattery(battery);
  });
});

您的 this 指的是错误的 this（我将其更改为 vm，这是一种流行的约定）。

您在重新分配时丢失了对电池对象的引用。我用 angular.copy 来保留参考。

function setBattery(battery){
  angular.copy(battery, vm.bat);
 console.log(vm.bat);
}

在 angular js 中使用电池管理器

Using the Battery Manager in angular js

javascript

navigator

angularjs