如何在ng-show中放入localStorage var？ （Angular JS / Firebase）
[英]How do I put a localStorage var inside my ng-show ? (Angular JS/Firebase)
问题描述
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. 当我加载页面但尚未登录时，一切正常，并且仅在我的导航中看到“ Login和Register （应如此）。
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. 但是，当我登录并加载任何页面时，导航将以一种奇怪的状态停留约0.5到1秒钟，其中"Register", "Log in", "Profile" and "Log out"都同时出现。
Then the nav appears as it should: showing only "Profile" and "Log out" . 然后，导航将显示为：仅显示"Profile" and "Log out" 。
EDIT: ng-cloack fixed this, but profile and log out don't appear when I log in. 编辑： ng-cloack解决了此问题，但登录时未显示配置文件和注销。
CODE: 码：
header.ejs 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 ? 如何在ng-show中输入localStorage var？
PS: header.ejs is an EJS partial that is loaded on all pages. PS：header.ejs是在所有页面上加载的EJS部分。
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 : 我尝试使用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. 现在使用ngCookies ...无效：/不管身份验证状态如何，导航卡都停留在登录模式。
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. 编辑：我现在正在使用angularfire，它工作正常，除了一件事，我需要将authstate存储在localStorage中。 I have been trying with ng-storage and $window.localSorage but it didn't work... 我一直在尝试ng-storage和$ window.localSorage，但是没有用...
2 个解决方案
解决方案1
1 已采纳 2017-01-27 13:39:30
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. 您可以使用angular ng-cloak指令来防止AngularJS html模板在加载应用程序时被浏览器短暂地以其原始（未编译）形式显示。
ngCloak documentation ngCloak文档
<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. 您应该使用$window服务访问在控制器范围之外创建的变量。 On top of that, you should not create the (almost) same controller twice. 最重要的是，您不应两次创建（几乎）相同的控制器。
$window documentation $ window文档
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"));
解决方案2
-1 2017-01-27 16:04:33
You have declared the $rootScope, but I don't see where you injected.. 您已经声明了$ rootScope，但是我看不到您在哪里注入。
Remember all dependencies have to be injected through the $inject dependency.. 请记住，所有依赖项都必须通过$ inject依赖项进行注入。
Var app = controller('mycontroller', ['$rootScope', function($rootScope) {
}]);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.