स्थिति:

जब मैं एक पृष्ठ लोड करता हूं और अभी तक लॉग इन नहीं करता हूं, तो सब कुछ ठीक काम करता है और मुझे अपनी नौसेना में केवल Login और Register दिखाई देता है जैसा कि मामला होना चाहिए।

लेकिन जब मैं लॉग इन करता हूं और मैं किसी भी पेज को लोड करता हूं, तो एनएवी एक अजीब स्थिति में लगभग 0.5 से 1 सेकंड तक रहेगा जहां "Register", "Log in", "Profile" and "Log out" सभी एक ही समय में दिखाई देते हैं।

तब एनएवी जैसा दिखना चाहिए वैसा ही दिखाई देता है: केवल "Profile" and "Log out" दिखा रहा है।

संपादित करें: ng-cloack ने इसे ठीक कर दिया, लेकिन जब मैं लॉग इन करता हूं तो प्रोफ़ाइल और लॉग आउट दिखाई नहीं देते हैं।


कोड:

हेडर.ईजेएस

<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>

प्रश्न:

मैं अपने एनजी-शो के अंदर लोकलस्टोरेज संस्करण कैसे दर्ज करूं?

पीएस .: शीर्षलेख। ईजेएस एक ईजेएस आंशिक है जो सभी पृष्ठों पर लोड होता है।


मैंने क्या प्रयास किया:

यह काम करता है लेकिन प्रत्येक पृष्ठ पर एनएवी को पुनः लोड करता है, जिससे झिलमिलाहट होती है।

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 का उपयोग कर रहा हूं और यह एक चीज को छोड़कर ठीक काम करता है, मुझे स्थानीय स्टोरेज में ऑथस्टेट को स्टोर करने की आवश्यकता है। मैं ng-storage और $window.localSorage के साथ कोशिश कर रहा हूं, लेकिन यह काम नहीं किया...

0
Coder1000 23 जिंदा 2017, 19:43

2 जवाब

सबसे बढ़िया उत्तर

आप कोणीय ng-cloak निर्देश का उपयोग कर सकते हैं ताकि AngularJS html टेम्प्लेट को ब्राउज़र द्वारा उसके कच्चे (असंकलित) रूप में संक्षिप्त रूप से प्रदर्शित होने से रोका जा सके, जबकि आपका एप्लिकेशन लोड हो रहा है।

एनजीक्लोक प्रलेखन

<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 सेवा का उपयोग करना चाहिए। उसके ऊपर, आपको दो बार (लगभग) एक ही नियंत्रक नहीं बनाना चाहिए।

$विंडो प्रलेखन

ऐसा कुछ उपयोग करना (परीक्षण नहीं किया गया):

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"));
1
Magicprog.fr 29 जिंदा 2017, 12:39

आपने $rootScope घोषित कर दिया है, लेकिन मुझे नहीं पता कि आपने कहां इंजेक्शन लगाया है..

याद रखें कि सभी निर्भरताओं को $ इंजेक्ट निर्भरता के माध्यम से इंजेक्शन दिया जाना है ..

    Var app = controller('mycontroller', ['$rootScope', function($rootScope) {
}]);
-1
Kenry Sanchez 27 जिंदा 2017, 19:04