-
-
Save shakirullahi/7945741 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
angular.module('waitForAuth', []) | |
/** | |
* A service that returns a promise object, which is resolved once angularFireAuth | |
* is initialized (i.e. it returns login, logout, or error) | |
*/ | |
.service('waitForAuth', function($rootScope, $q, $timeout) { | |
var def = $q.defer(), subs = []; | |
subs.push($rootScope.$on('angularFireAuth:login', fn)); | |
subs.push($rootScope.$on('angularFireAuth:logout', fn)); | |
subs.push($rootScope.$on('angularFireAuth:error', fn)); | |
function fn() { | |
for(var i=0; i < subs.length; i++) { subs[i](); } | |
$timeout(function() { | |
// force $scope.$apply to be re-run after login resolves | |
def.resolve(); | |
}); | |
} | |
return def.promise; | |
}) | |
/** | |
* A directive that hides the element from view until waitForAuth resolves | |
*/ | |
.directive('ngCloakAuth', function(waitForAuth) { | |
return { | |
restrict: 'A', | |
compile: function(el) { | |
console.log('waiting'); | |
el.addClass('hide'); | |
waitForAuth.then(function() { | |
el.removeClass('hide'); | |
}) | |
} | |
} | |
}) | |
/** | |
* A directive that shows elements only when the given authentication state is in effect | |
*/ | |
.directive('ngShowAuth', function($rootScope) { | |
var loginState; | |
return { | |
restrict: 'A', | |
compile: function(el, attr) { | |
var expState = attr.ngShowAuth; | |
function fn(newState) { | |
loginState = newState; | |
el.toggleClass('hide', loginState !== expState ); | |
} | |
fn(null); | |
$rootScope.$on("angularFireAuth:login", function() { fn('login') }); | |
$rootScope.$on("angularFireAuth:logout", function() { fn('logout') }); | |
$rootScope.$on("angularFireAuth:error", function() { fn('error') }); | |
} | |
} | |
}); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<style> | |
.hide { display: none; } | |
</style> | |
<script> | |
// include the waitForAuth module as a dependency | |
angular.module('myApp', ['waitForAuth']) | |
// you can use waitForAuth directly from your scripts | |
.controller('myController', function(waitForAuth) { | |
waitForAuth.then(function() { | |
/* do something after auth completes */ | |
}) | |
}) | |
</script> | |
<!-- and you can use the directives in your views --> | |
<div ng-cloak-auth>Authentication has resolved.</div> | |
<div ng-show-auth="login">{{user.id}} is logged in</div> | |
<div ng-show-auth="logout">Logged out</div> | |
<div ng-show-auth="error">An error occurred during authentication</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment