Angular + Firebase + AngularFire Seed Directive ShowAdmin

Question

First, a wordy up-front description of my situation... My application is utilizing Angular.js and AngularFire to run without a backend. I am using Firebase Simple Login for authentication, and the AngularFire-Seed project provides a simple way to get auth info. To create an administrator in the application, I'm storing a user's uid in /admin in my Firebase, so I can check if /admin/simpleLogin:45 exists, for example, to see if the user with uid simpleLogin:45 is an admin.

I'm trying to create a directive which will cause an element to be shown if the current user is an administrator of my application. I've written a directive that partially works, and I'm having trouble getting the kinks worked out. I request your assistance, gallant reader!

Here's my directive code:

'use strict';

/* Directives */

angular.module('myApp.directives', []).
    directive('appVersion', ['version', function (version) {
        return function (scope, elm, attrs) {
            elm.text(version);
        };

    }])

    .directive('bpmShowAdmin', function ($rootScope, $scope, syncData, waitForAuth) {
        return {
            restrict: 'A',
            compile: function (el, attr) {
                el.addClass('hide');
                waitForAuth.then(function () {
                    console.log('checking for admin rights');
                    var admins = syncData('admins');

                    admins.$on("loaded", function () {
                        var isAdmin = $rootScope.auth.user.uid in admins;
                        if (isAdmin) {
                            console.log('admin rights granted!');

                            el.toggleClass('hide', !isAdmin);
                        }
                    });
                });

                $rootScope.$on("$firebaseSimpleLogin:logout", function () {
                    el.toggleClass('hide', true);
                });
            }
        }
    });

The directive is used by doing a little something like this:

<li bpm-show-admin>
    ...
</li>

This works most of the time, but I'm clearly not understanding the compile/link phases or something like that. When I first log into my application, it doesn't always show everything that's supposed to be visible when I'm logged in as an admin. It works after a refresh or two, so there's some kind of race condition or issue with where I'm putting the directive logic (compile vs. link vs. controller).

I've been using the AngularFire-seed project's ngShowAuth as an example, which I believe was developed by the infamous katowulf. Here's an example of that code

What am I doing incorrectly and/or not understanding?

Thanks for your help!

Answer 1

I began to start a fiddle to get further help, but I wound up just getting pissed off at setting up my overly complex situation in a fiddle and solved the damn thing myself. Here's what I came up with:

'use strict';

angular.module('bpmWaitForAdmin', [])

    .service('bpmWaitForAdmin', function ($rootScope, syncData, waitForAuth) {
        return {
            init: function (auth) {
                $rootScope.$on('$firebaseSimpleLogin:login', function (e, user) {
                    var admins = syncData('admins');

                    admins.$on("loaded", function () {
                        if (user.uid in admins) {
                            $rootScope.$broadcast('bpmWaitForAdmin:true');
                        }

                        else {
                            $rootScope.$broadcast('bpmWaitForAdmin:false');
                        }
                    });
                });

                $rootScope.$on('$firebaseSimpleLogin:logout', function () {
                    $rootScope.$broadcast('bpmWaitForAdmin:false');
                });
            }
        };
    })

    .directive('bpmShowAdmin', function ($rootScope, $timeout) {
        return {
            restrict: 'A',
            compile: function (element, attributes) {
                element.addClass('hide');

                $rootScope.$on("bpmWaitForAdmin:true", function () {
                    $timeout(function () {
                        element.removeClass('hide');
                    });
                });

                $rootScope.$on("bpmWaitForAdmin:false", function () {
                    $timeout(function () {
                        element.addClass('hide');
                    });
                });
            }
        }
    });