我希望在连接或断开Firebase服务器时更改图标颜色.我有这么远
<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
试图做一个对服务的引用作为一个对象,而不是按照好的教程A Tale of Frankenstein and Binding to Service Values in 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没有按照我的预期方式更新为全局变量.我假设一个服务在应用程序加载时被调用一次,并且将一个作用域变量分配给一个服务(对象)不是一个调用,而是一个引用…
我究竟做错了什么？
我在
jsFiddle中使用$emit和$on处理服务中的状态更改.主要的问题是上线时,角度绑定不能正常工作,所以我需要用$scope来强制一个角度循环.$apply().
我开始编写代码的第一个版本,但做了一些重构.您可以在jsFiddle上找到完整的代码,但服务和控制器如下所示：
服务
.service('dbConnectStatus',function($rootScope){
var status = false;
var color = 'red';
var self = {
startWatchingConnectionStatus: function(){
var connectedRef = firebase.database().ref().child(".info/connected");
connectedRef.on("value",function(snap) {
console.log(snap.val());
status = snap.val();
if (status) {
color = 'blue';
console.log("Connected to DB (" + color + ")" );
} else {
color = 'red';
console.log("Disonnected to DB (" + color + ")" );
}
$rootScope.$emit('connectionStatus:change',{style: {'color': color},status: status}});
});
},getStatus: function(){
return status;
},getColor: function(){
return color;
}
};
return self;
})
调节器
.controller('HomeCtrl',['$scope','dbConnectStatus','$rootScope',function($scope,dbConnectStatus,$rootScope) {
dbConnectStatus.startWatchingConnectionStatus();
$rootScope.$on('connectionStatus:change',function currentCityChanged(event,value){
$scope.color = value.style;
//if changed to connected then force the $apply
if(value.status === true){
$scope.$apply();
}
});
}]);
让我知道如果有什么还不清楚.
