大佬教程收集整理的这篇文章主要介绍了AngularJS更新连接或断开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 } })
它第一次改变颜色.但是当断开连接时它不会改变…似乎不是双向绑定服务.我该如何实现?
试图做一个对服务的引用作为一个对象,而不是按照好的教程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上找到完整的代码,但服务和控制器如下所示:
服务
.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(); } }); }]);
让我知道如果有什么还不清楚.
以上是大佬教程为你收集整理的AngularJS更新连接或断开Firebase时的服务值全部内容,希望文章能够帮你解决AngularJS更新连接或断开Firebase时的服务值所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。