Question

我有一个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设置为true并在控制器中再次将其设置为false是行不通的。我没有看到div包含2 divs。设置<div ng-show = "true">有效但<div ng-show = "showStatus">不起作用。我做错了什么？

Answer 1

您的代码中有一些简单的错误。在使用$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)
    }
});

视图

使用$rootScope访问$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>

<强> - ＆GT; Demo fiddle

Answer 2

您应该将$scope.$watch更改为$rootScope.$watch，因为online对象是rootScope对象。

我想问题是你在2秒内使用$scope.showStatus = false;。所以div不会表现出来。只需从$ timeout函数中删除$scope.showStatus = false;行并检查。

此外，您应该按照我在问题评论中提到的内容进行操作。

不要使用$ rootScope。如果刷新浏览器，则范围值清晰。我建议您需要使用$ service或$ Broadcast

在我的猜测中，您不需要使用$ 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);
    }

和HTML

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

将ng-show设置为true不起作用

2 个答案:

观看$ rootScope

视图