मेरे पास एक div है जो दिखाता है कि स्थिति बदलने पर उपयोगकर्ता ऑनलाइन है या ऑफलाइन।

<div ng-show="showStatus">
    Status:
    <div ng-show="online">You're online</div>
    <div ng-hide="online">You're offline</div>
</div>

$rootScope वैरिएबल पर स्थिति सेट करना:

    checkInternetApp.run(function ($window, $rootScope) {
    $rootScope.online = navigator.onLine;
    $window.addEventListener("offline", function () {
        $rootScope.$apply(function () {
            $rootScope.online = false;
        });
    }, false);

    $window.addEventListener("online", function () {
        $rootScope.$apply(function () {
            $rootScope.online = true;
        });
    }, false);
});

div दिखा रहा है जिसमें divs ऑनलाइन या ऑफलाइन दिखा रहा है:

    checkInternetApp.controller("checkInternetController", ["$scope", "$http", "$timeout", function ($scope, $http, $timeout) {
    $scope.showStatus = false;
    $scope.$watch("online", function () {

        $scope.showStatus = true; //set to true for 2 seconds
        $timeout(function () {
            $scope.showStatus = false; //hiding after 2 seconds
            console.log("timeout");
        }, 2000)
        console.log($scope.showStatus);
    })
    $scope.showDialog = function () {
        console.log($scope.showStatus);
    }
}])

लेकिन showStatus को सही पर सेट करना और नियंत्रक में इसे फिर से गलत पर सेट करना काम नहीं कर रहा है। मुझे वह div दिखाई नहीं देता जिसमें 2 divs हों। सेटिंग <div ng-show = "true"> काम करती है लेकिन <div ng-show = "showStatus"> काम नहीं करती। मैं क्या गलत कर रहा हूं?

3
Abhi 7 सितंबर 2017, 09:41

2 जवाब

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

आपके कोड में कुछ साधारण गलतियाँ हैं। जब आप $scope.showStatus और $rootScope.online का उपयोग कर रहे हों तो आपका कोड इस तरह होना चाहिए:

देखें $rootScope

.... $scope के बजाय $rootScope.online एक $rootScope परम है।

$rootScope.$watch("online", function (newValue, oldValue) {
    if (newValue) {
      $scope.showStatus = true; //set to true for 2 seconds
      $timeout(function () {
          $scope.showStatus = false; //hiding after 2 seconds
          $rootScope.online = false;
      }, 2000)
    }
});

राय

$root.<objectName> को ध्यान में रखते हुए $rootScope पैरामीटर एक्सेस करें:

<div ng-show="showStatus">
    Status:
    <div ng-show="$root.online">You're online</div>
    <div ng-hide="$root.online">You're offline</div>
</div>

--> डेमो फिडल

1
lin 7 सितंबर 2017, 12:25

आपको $scope.$watch को $rootScope.$watch में बदलना चाहिए, क्योंकि online ऑब्जेक्ट एक रूटस्कोप ऑब्जेक्ट है।

मुझे लगता है कि समस्या यह है कि आप 2 सेकंड के भीतर $scope.showStatus = false; का उपयोग कर रहे हैं। तो div नहीं दिखाएगा। $timeout फ़ंक्शन से बस $scope.showStatus = false; लाइन को हटा दें और जांचें।

साथ ही आपको उसका अनुसरण करना चाहिए जिसका उल्लेख मैंने आपके प्रश्न के तहत टिप्पणी में किया है।

$rootScope का उपयोग न करें। यदि आप अपने ब्राउज़र को रीफ्रेश करते हैं, तो स्कोप मान स्पष्ट होते हैं। मेरा सुझाव है कि आपको $service या $ब्रॉडकास्ट के साथ जाना चाहिए

और मेरे अनुमान में, आपको $timeout का उपयोग करने की आवश्यकता नहीं है, आपको इसके नीचे तर्क की आवश्यकता हो सकती है।

$rootScope.$watch("online", function (oldValue,newValue) {  
       $scope.showStatus = false; 
        $scope.IsOnline= newValue;  
       if(newValue)
        $scope.showStatus = true; 

        console.log($scope.showStatus);
    })
    $scope.showDialog = function () {
        console.log($scope.showStatus);
    }

और एचटीएमएल

<div ng-show="showStatus">
    Status:
    <div ng-show="IsOnline">You're online</div>
    <div ng-hide="IsOnline">You're offline</div>
</div>
0
Ramesh Rajendran 7 सितंबर 2017, 10:27