Я хочу изменить цвет значка при подключении или отключении к серверу firebase. Я добрался до этого:
HTML
<button class="button button-icon ion-cloud" ng-style="dbConnectedStyle"></button>
контроллер
firebaseRef.$loaded().then( function() {
$scope.dbConnectedStyle = {'color': dbConnectStatus.color};
}
Сервис
.service('dbConnectStatus', function(firebaseRef){
var status = false;
var color = 'transparent';
var connectedRef = firebaseRef.child(".info/connected");
connectedRef.on("value", function(snap) {
status = snap.val();
if (status) {
color = 'lightgrey';
console.log("Connected to DB (" + color + ")" );
} else {
color = 'transparent';
console.log("Disonnected to DB (" + color + ")" );
}
});
return {
'boolean': status,
'color': color
}
})
Он меняет цвет в первый раз. Но при отключении его не меняется... похоже, что это не двусторонняя привязка к сервису. Как достичь этого?
UPDATE
Пытался сделать ссылку на Сервис как объект, а не выполнять назначения примитивов, как объяснено в хорошем учебнике Сказка о Франкенштейне и привязка к служебным значениям в Angular.js
Я изменил код на следующий
HTML
<button class="button button-icon ion-cloud"
ng-style="dbConnectionStatus.connectionStyle">
</button>
Сервис
.service('dbConnectStatus', function(firebaseRef, $rootScope){
this.status = false;
var styles = {
'offlineStyle': {'color': 'red'},
'onlineStyle': {'color': 'lightgrey'}
};
this.connectionStyle = styles.offlineStyle;
firebaseRef.child(".info/connected")
.on("value",
function(snap) {
this.status = snap.val();
if (snap.val()) {
console.log("Connected to DB.");
this.connectionStyle = styles.onlineStyle;
console.log(this.connectionStyle);
} else {
console.log("Disconnected to DB.");
this.connectionStyle = styles.offlineStyle;
console.log(this.connectionStyle);
}
console.log(this.status);
$rootScope.$broadcast('dbConnection:changed');
}
);
})
контроллер
$scope.dbConnectionStatus = dbConnectStatus;
$scope.$on('dbConnection:changed', function() {
console.log("'on(...)' called. This is the $scope.dbConnectionStatus.connectionStyle:");
$scope.dbConnectionStatus = dbConnectStatus;
console.log($scope.dbConnectionStatus.connectionStyle);
console.log("This is the dbConnectStatus.connectionStyle:");
console.log(dbConnectStatus.connectionStyle);
});
$rootScope.$watch('dbConnectStatus', function (){
$scope.dbConnectionStatus = dbConnectStatus;
});
//$rootScope.$apply();
Затем я перезагрузил код и получил это консольное сообщение
Затем я отключил соединение
Затем я включаю соединение
Мне ясно, что служба dbConnectionStatus
не обновляется как глобальная переменная так, как я ожидал. Я полагал, что служба вызывается один раз, когда приложение является нагрузкой, и что назначение переменной области для объекта (объекта) не является вызовом, а ссылкой...
Что я делаю неправильно?