角+火力地堡+ AngularFire种子指令ShowAdmin [英] Angular + Firebase + AngularFire Seed Directive ShowAdmin

问题描述

首先，我的情况...我的应用是利用Angular.js和AngularFire无需后端运行罗嗦了前期的描述。我使用的火力地堡简单登录认证和AngularFire，种子工程提供了一种简单的方式来获得验证信息。要创建的应用程序的管理员，我存储用户的在我火力地堡/管理员UID，所以我可以检查/管理/ simpleLogin：45存在，例如，看是否与UID simpleLogin用户：45是管理员。

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!

下面是我的指令，code：

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).

我一直在使用AngularFire种子项目的ngShowAuth作为一个例子，我相信是由臭名昭著的katowulf发展。 下面是code 的例子

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?

感谢您的帮助！

推荐答案

我就开始启动小提琴得到进一步的帮助，但我结束了在小提琴建立我的过于复杂的局面才刚刚生气了，解决了这个该死的事情我自己。以下是我想出了：

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');
                    });
                });
            }
        }
    });

这篇关于角+火力地堡+ AngularFire种子指令ShowAdmin的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！