CODEWITHSUNDEEP
angularjs
Abhi
Abhi

Reputation: 1574

Setting ng-show to true not working

I have a div which shows whether the user is online or offline when the status changes.

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

Setting status on $rootScope variable:

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

Showing the div which contains divs showing online or offline:

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

But setting the showStatus to true and setting it to false again in the controller is not working. I don't see the div containing the 2 divs. Setting <div ng-show = "true"> works but <div ng-show = "showStatus"> doesn't work. What am I doing wrong?

Upvotes: 3

Views: 1170

Answers (2)

lin
lin

Reputation: 18402

You have some simple mistakes in your code. While you using $scope.showStatus and $rootScope.online your code should be like this:

Watch $rootScope

.... instead of $scope while $rootScope.online is an $rootScope param.

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

View

Access $rootScope params in view with $root.<objectName>:

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

--> Demo fiddle

Upvotes: 1

Ramesh Rajendran
Ramesh Rajendran

Reputation: 38693

You should change $scope.$watch to $rootScope.$watch, because of the online object is a rootScope object.

I guess the problem is you have using $scope.showStatus = false; within 2 seconds. So the div won't show. just remove the $scope.showStatus = false; line from $timeout function and check.

Also you should follow which I have mentioned you in the comment under your question.

Don't use $rootScope. If you refresh your browser, then the scope values are clear . I'll suggest you need go with $service or $Broadcast

And in my guess, you don't need to use $timeout, You may need this below logic. 

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

and the HTML 

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

Upvotes: 0

Related Questions