0

I have an AngularFire app, generated with the angularfire yeoman generator. I'm using a directive that allows me to directly edit elements in the view when I'm logged in. For example: 

<h1 contenteditable ng-model="foo.bar"></h1>

This directive comes straight from the Angular docs.

My Firebase security rules are pretty basic at the moment:

{
    "rules": {
        ".read": true,
        ".write": "auth != null"
    }
}

I'm using the following styles to add a dashed border around all editable content:

[contenteditable] {
  &:hover {
    outline: #ccc 2px dashed;
    background-color: #f4f4f4;
  }
}

I would like to scope this style to a logged-in state.

For instance:

.controller('FooCtrl', function($scope, simpleLogin, user) {
$scope.userLoggedIn = function() {
  if ($scope.user) {
    return true;
  }
}
<body ng-class="{loggedIn: userLoggedIn()}">

I don't really understand how the auth stuff works. Is there a simple way to go accomplishing my goal of adding a class based on whether or not a user is logged in? Is there another/better way to accomplish this? Thanks in advance.

4

1 に答える 1

0

ここで私自身の質問に答えyo angularfireます。ジェネレーターは、ログインおよびログアウト機能を処理する simpleLogin.js ファイルを作成します。関数に小さな DOM 操作を追加しただけで、body 要素でクラスを切り替えるという望ましい結果が得られます。

login: function(provider, opts) {
          angular.element('body').addClass('isLoggedIn');
          return auth.$login(provider, opts);
        },

        logout: function() {
          auth.$logout();
          angular.element('body').removeClass('isLoggedIn');
        }
于 2014-11-24T16:59:14.803 に答える