I’d like to add an icon to the header bar that indicates whether there is a network connection or not.
So I wrote the following controller:
.controller('AppCtrl', function($scope, $rootScope, $stateParams, $ionicPlatform) {
$ionicPlatform.ready(function() {
function onGoesOnLine(){
$scope.ConnectionOnline = true;
console.log($scope.ConnectionOnline);
$rootScope.$$phase || $rootScope.$apply();
}
function onGoesOffLine(){
$scope.ConnectionOnline = false;
console.log($scope.ConnectionOnline);
$rootScope.$$phase || $rootScope.$apply();
}
window.addEventListener("offline", onGoesOffLine, false);
window.addEventListener("online", onGoesOnLine, false);
if(navigator.onLine == true) {
onGoesOnLine();
}
else {
onGoesOffLine();
}
});
})
It works great. But now I would like to add the actual icon in the header bar, and I’m not sure how to approach this.
I know Ionic is transitioning to a new header bar system in the 1.0 beta, but as there is no indication on when that will be landing I need something in the interim.
Anybody know of a way to inject an element into the header bar?