Question

状况：

当我加载页面但尚未登录时，一切正常，我只会在导航中看到Login和Register。

但是当我登录并加载任何页面时，导航将在一个奇怪的状态下停留约0.5到1秒，其中"Register", "Log in", "Profile" and "Log out"同时出现。

然后导航按原样显示：仅显示"Profile" and "Log out"。

编辑： ng-cloack解决此问题，但我登录时不会显示个人资料和退出。

代码：

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>

问题：

如何在ng-show中输入localStorage var？

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

我做了什么：

这可以工作，但会在每个页面重新加载导航，导致闪烁。

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

我尝试使用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");
    });
  }
]);

现在使用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');
        }
    });

  }
]);

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

Answer 1

您可以使用angular ng-cloak指令，以防止浏览器在加载应用程序时以原始（未编译）形式简要显示AngularJS html模板。

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>

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

$window documentation

使用类似的东西（未经测试）：

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

对于本地存储，您只需使用常规存储：

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

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

Answer 2

您已声明$ rootScope，但我看不到您注入的位置..

请记住，必须通过$ inject依赖注入所有依赖项。

    Var app = controller('mycontroller', ['$rootScope', function($rootScope) {
}]);

如何在我的ng-show中放置localStorage var？（Angular JS / Firebase）

2 个答案:

如何在我的ng-show中放置localStorage var？ （Angular JS / Firebase）

2 个答案:

如何在我的ng-show中放置localStorage var？（Angular JS / Firebase）