如何将 localStorage var 放入我的 ng-show 中?(Angular JS/Firebase) [英] How do I put a localStorage var inside my ng-show ? (Angular JS/Firebase)

查看：15
本文介绍了如何将 localStorage var 放入我的 ng-show 中?(Angular JS/Firebase)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

<小时>

情况:

当我加载一个页面但尚未登录时，一切正常，我只在导航中看到 Login 和 Register 应该是这种情况.

但是当我登录并加载任何页面时，导航会在一种奇怪的状态下停留大约 0.5 到 1 秒，其中 注册"、登录"、个人资料"和注销" 全部同时出现.

然后导航就会出现它应该的样子:只显示Profile"和Log out".

ng-cloack 修复了这个问题，但在我登录时不会出现配置文件和注销.

<小时>

代码:

header.ejs

<div ng-controller="ctrlHead"><ul class="nav navbar-nav"><li ng-show="!authenticated"><a href="/users/register">JOIN</a></li><li ng-show="!authenticated"><a href="/users/login">登录</a></li><li ng-show="authenticated"><a href="/users/profile">ME</a></li><li ng-show="authenticated" onclick="signOut();"><a>注销</a></li>

<小时>

问题:

如何在我的 ng-show 中输入 localStorage 变量?

P.S.:header.ejs 是一个在所有页面上加载的 EJS 部分.

<小时>

我的尝试:

这有效，但会在每个页面重新加载导航，导致闪烁.

app.factory("Auth", ["$firebaseAuth",功能($firebaseAuth){返回 $firebaseAuth();}]);app.controller("ctrlHead", ["$scope", "Auth", "$window",函数($scope，Auth，$window){$scope.auth = Auth;$scope.auth.$onAuthStateChanged(function(firebaseUser) {如果(firebaseUser){setAppCookie();}$scope.authenticated = firebaseUser;});}]);

我尝试使用 localStorage:

app.factory("Auth", ["$firebaseAuth",功能($firebaseAuth){返回 $firebaseAuth();}]);app.controller("ctrlHead", ["$scope", "Auth", "$window",函数($scope，Auth，$window){$scope.authenticated = $window.localStorage.getItem("authenticated");$scope.auth = Auth;$scope.auth.$onAuthStateChanged(function(firebaseUser) {如果(firebaseUser){setAppCookie();}$window.localStorage.setItem("已认证", firebaseUser);$scope.authenticated = $window.localStorage.getItem("authenticated");});}]);

现在使用 ngCookies... 不起作用:/无论身份验证状态如何，导航都卡在登录模式.

app.factory("Auth", ["$firebaseAuth",功能($firebaseAuth){返回 $firebaseAuth();}]);app.controller("ctrlHead", ["$scope", "Auth", "$cookies",功能($范围，身份验证，$cookies){$scope.auth = Auth;$scope.auth.$onAuthStateChanged(function(firebaseUser) {如果(firebaseUser){setAppCookie();$cookies.put('authenticated', firebaseUser);$scope.authenticated = $cookies.get('authenticated');} 别的 {$cookies.put('authenticated', firebaseUser);$scope.authenticated = $cookies.get('authenticated');}});}]);

<小时>

我现在使用 angularfire 并且它工作正常，除了一件事，我需要将 authstate 存储在 localStorage 中.我一直在尝试使用 ng-storage 和 $window.localSorage 但它没有用...

解决方案

您可以使用 angular ng-cloak 指令来防止 AngularJS html 模板被浏览器在其加载应用程序时的原始(未编译)表单.

ngCloak 文档

<ul class="nav navbar-nav"><li ng-show="!authenticated"><a href="/users/register">JOIN</a></li><li ng-show="!authenticated"><a href="/users/login">登录</a></li><li ng-show="authenticated"><a href="/users/profile">ME</a></li><li ng-show="authenticated" onclick="signOut();"><a>注销</a></li></html>

您应该使用 $window 服务来访问在控制器范围之外创建的变量.最重要的是，您不应两次创建(几乎)相同的控制器.

$window 文档

使用类似的东西(未测试):

firebase.auth().onAuthStateChanged(function(user) {console.log("当前用户:" + firebase.auth().currentUser);app.controller('ctrl', function($rootScope, $window) {$scope.authenticated = $window.user != null;setAppCookie();//编译整个<body>使用名为app"的角度模块angular.bootstrap(document.body, ['app']);});});

对于本地存储，您只需要使用常规的:

//设置项目localStorage.setItem("认证", JSON.stringify(firebaseUser));//获取项目$scope.authenticated = JSON.parse(localStorage.getItem("authenticated"));

SITUATION:

When I load a page and didn't log in yet, everything works fine and I only see Login and Register in my nav as should be the case.

But when I log in and I load any page, the nav will stay for about 0.5 to 1 seconds in a strange state where "Register", "Log in", "Profile" and "Log out" all appear at the same time.

Then the nav appears as it should: showing only "Profile" and "Log out".

EDIT: ng-cloack fixed this, but profile and log out don't appear when I log in.

CODE:

header.ejs

<html ng-app = "app">
        <div ng-controller="ctrlHead">
          <ul class="nav navbar-nav">
                <li ng-show="!authenticated"><a href="/users/register">JOIN</a></li>
                <li ng-show="!authenticated"><a href="/users/login">Login</a></li>
                <li ng-show="authenticated"><a href="/users/profile">ME</a></li>
                <li ng-show="authenticated" onclick="signOut();"><a>Logout</a></li>
          </ul>
       </div>

QUESTION:

How do I input a localStorage var inside my ng-show ?

P.S.: header.ejs is an EJS partial that is loaded on all pages.

WHAT I TRIED:

This works but reloads the nav at each page, causing flickering.

app.factory("Auth", ["$firebaseAuth",
  function($firebaseAuth) {
    return $firebaseAuth();
  }
]);

app.controller("ctrlHead", ["$scope", "Auth", "$window",
  function($scope, Auth, $window) {
    $scope.auth = Auth;

    $scope.auth.$onAuthStateChanged(function(firebaseUser) {
        if (firebaseUser) {
            setAppCookie();
        }
        $scope.authenticated = firebaseUser;
    });
  }
]);

My try using localStorage:

app.factory("Auth", ["$firebaseAuth",
  function($firebaseAuth) {
    return $firebaseAuth();
  }
]);

app.controller("ctrlHead", ["$scope", "Auth", "$window",
  function($scope, Auth, $window) {
    $scope.authenticated = $window.localStorage.getItem("authenticated");
    $scope.auth = Auth;

    $scope.auth.$onAuthStateChanged(function(firebaseUser) {
        if (firebaseUser) {
            setAppCookie();
        }
        $window.localStorage.setItem("authenticated", firebaseUser);
        $scope.authenticated = $window.localStorage.getItem("authenticated");
    });
  }
]);

And now with ngCookies... Did not work :/ The nav is stuck in logged in mode regardless of auth state.

app.factory("Auth", ["$firebaseAuth",
  function($firebaseAuth) {
    return $firebaseAuth();
  }
]);

app.controller("ctrlHead", ["$scope", "Auth", "$cookies",
  function($scope, Auth, $cookies) {

    $scope.auth = Auth;

    $scope.auth.$onAuthStateChanged(function(firebaseUser) {

        if (firebaseUser) {
            setAppCookie();
            $cookies.put('authenticated', firebaseUser);
            $scope.authenticated = $cookies.get('authenticated');
        } else {
            $cookies.put('authenticated', firebaseUser);
            $scope.authenticated = $cookies.get('authenticated');
        }
    });

  }
]);

EDIT: I am now using angularfire and it works fine except for one thing, I need to store the authstate in localStorage. I have been trying with ng-storage and $window.localSorage but it didn't work...

解决方案

You can use the angular ng-cloak directive in order to prevent the AngularJS html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading.

ngCloak documentation

<html ng-app="app" ng-cloak>
      <ul class="nav navbar-nav">
            <li ng-show="!authenticated"><a href="/users/register">JOIN</a></li>
            <li ng-show="!authenticated"><a href="/users/login">Login</a></li>
            <li ng-show="authenticated"><a href="/users/profile">ME</a></li>
            <li ng-show="authenticated" onclick="signOut();"><a>Logout</a></li>
      </ul>
</html>

You should use the $window service to access variable created outside of the scope of your controller. On top of that, you should not create the (almost) same controller twice.

$window documentation

Using something like that (not tested): 

firebase.auth().onAuthStateChanged(function(user) {
    console.log("CURRENT USER:" + firebase.auth().currentUser);
    app.controller('ctrl', function($rootScope, $window) {
        $scope.authenticated = $window.user != null;
        setAppCookie();
        // Compile the whole <body> with the angular module named "app"
        angular.bootstrap(document.body, ['app']);
    });
});

For local storage, you just need to use the regular one:

//Set item
localStorage.setItem("authenticated", JSON.stringify(firebaseUser));

//Get item
$scope.authenticated = JSON.parse(localStorage.getItem("authenticated"));

这篇关于如何将 localStorage var 放入我的 ng-show 中?(Angular JS/Firebase)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆