Angular + Firebase + AngularFire 种子指令 ShowAdmin [英] Angular + Firebase + AngularFire Seed Directive ShowAdmin
问题描述
首先,对我的情况进行冗长的前期描述...我的应用程序使用 Angular.js 和 AngularFire 在没有后端的情况下运行.我使用 Firebase Simple Login 进行身份验证,AngularFire-Seed 项目提供了一种获取身份验证信息的简单方法.为了在应用程序中创建管理员,我将用户的 uid 存储在 Firebase 的/admin 中,因此我可以检查/admin/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!
这是我的指令代码:
'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-seed 项目的 ngShowAuth 作为示例,我相信它是由臭名昭著的 katowulf 开发的.这是该代码的示例
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?
感谢您的帮助!
推荐答案
我开始使用 fiddle 来获得进一步的帮助,但最终我对在 fiddle 中设置过于复杂的情况感到恼火并解决了该死的问题自己的事.这是我想出的:
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');
});
});
}
}
});
这篇关于Angular + Firebase + AngularFire 种子指令 ShowAdmin的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!