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

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

Answer 1

您的代码中有一些简单的错误。当您使用$scope.showStatus时和$rootScope.online你的代码应该是这样的:

观看 $rootScope

...而不是 $scope while $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>

--> Demo fiddle