如何在我的ng-show中放置localStorage var？（角JS /火力地堡）

狀況：如何在我的ng-show中放置localStorage var？（角JS /火力地堡）

當我打開一個網頁，並沒有登錄然而，一切工作正常，我只看到我的導航Login和Register作爲應如此。

但是，當我登錄並加載任何頁面時，導航將保持大約0.5到1秒的奇怪狀態，其中"Register", "Log in", "Profile" and "Log out"全部同時出現。

然後導航出現，因爲它應該：只顯示"Profile" and "Log out"。

編輯：ng-cloack固定這一點，但配置文件和日誌時，我登錄不出現

CODE：

header.ejs

<html ng-app = "app"> 
     <div ng-controller="ctrlHead"> 
      <ul class="nav navbar-nav"> 
       <li ng-show="!authenticated"><a href="https://stackoverflow.com/users/register">JOIN</a></li> 
       <li ng-show="!authenticated"><a href="https://stackoverflow.com/users/login">Login</a></li> 
       <li ng-show="authenticated"><a href="https://stackoverflow.com/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和它的作品除了一件事很好，我需要存儲的localStorage的authstate。我一直在嘗試使用ng-storage和$ window.localSorage，但它不起作用...

來源

2017-01-23 Coder1000

這是住在什麼地方？ –

@SergChernata可悲的是：/ – Coder1000

你可以做小提琴嗎？我可以幫助您進行調試，但如果沒有現場示例，則很難分辨出發生了什麼。 –

您可以使用角度ng-cloak指令爲了防止AngularJS html模板被其瀏覽器短暫顯示原始（未編譯）表單，而您的應用程序正在加載。

ngCloak documentation

<html ng-app="app" ng-cloak> 
     <ul class="nav navbar-nav"> 
      <li ng-show="!authenticated"><a href="https://stackoverflow.com/users/register">JOIN</a></li> 
      <li ng-show="!authenticated"><a href="https://stackoverflow.com/users/login">Login</a></li> 
      <li ng-show="authenticated"><a href="https://stackoverflow.com/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"));

來源

2017-01-27 13:39:30

完美！現在你能否告訴我爲什麼我和註銷永遠不會出現？我做錯了什麼？ – Coder1000

@ Coder1000更新了我的答案 –

這不起作用，因爲用戶是一個對象，而不是一個布爾值。 – Coder1000

-1

你已宣佈$ rootScope，但我沒有看到你注入的地方..

記住所有依賴必須通過美元注入依賴注入..

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

來源

2017-01-27 16:04:33

的答案那不是，但是謝謝:) – Coder1000

如何在我的ng-show中放置localStorage var？ （角JS /火力地堡）

回答

相關問題

如何在我的ng-show中放置localStorage var？（角JS /火力地堡）