Использование диспетчера батареи в угловом js

Question

im пытается подключить объект менеджера батареи к угловому контроллеру, однако объект контроллера, похоже, не обновляется, когда обещание завершено 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

Вы можете сохранить свой контроллер как синтаксис. Ознакомьтесь с моей обновленной скрипкой по адресу https://jsfiddle.net/fnnruzjw/1/. Было несколько проблем:

Вам нужно было использовать $ scope. $ Apply.

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

Ваш это имел в виду неправильно это (я изменил его, чтобы быть, как ут является популярным конвенция).

Вы потеряли ссылку на свой аккумуляторный объект, когда вы его переназначили. Я использовал angular.copy, чтобы сохранить ссылку.

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

Answer 2

Присвоить battery к $scope.bat (инъекционные $ область в контроллере также). И вам, вероятно, понадобится также $scope.$apply(). В значительной степени замените this на $scope.