Question

我想在互联网不可用时在每个页面上显示互联网不可用的栏。

我正在使用Ionic框架，因此决定在menu.html上保留代码

这是我的菜单html代码

<div class="cfg-internet-error text-center text-bold" ng-hide="$root.internet_active">Internet not available</div>

我在.run上设置$ rootScope

 $rootScope.internet_active = navigator.onLine;
    window.addEventListener("online", function() {
        $rootScope.$broadcast('isOnline', true);
        $rootScope.internet_active = true;
    }, true);

    window.addEventListener("offline", function() {
        $rootScope.$broadcast('isOnline', false);
        $rootScope.internet_active = false;
    }, true);

如果互联网断开连接，它将显示栏，但是当它再次回来时它不会隐藏它我已经尝试过 - 如果也是，当我改变页面它隐藏回来，所以我发生了什么想要实时数据绑定视图，当值发生变化时，它也应该改变视图值

Answer 1

两个注释：

使用Angular包装器$window。
区分开发（PC）和生产（本机）环境。

例如：

var state,
    online = 'online',
    offline = 'offline';

if (ENV === 'production') {
    if ($cordovaNetwork.isOnline()) {
        state = online;
    }
    if ($cordovaNetwork.isOffline()) {
        state = offline;
    }
}
else if (ENV === 'development') {
    if (navigator.onLine) {
        state = online;
    }
    else {
        state = offline;
    }
}

addEventListener(online);
addEventListener(offline);

function addEventListener(status) {
    $window.addEventListener(status, function () {
        state = status;
        if (state === online) {
            // $rootScope.$broadcast("network online");
        }
        else if (state === offline) {
            // $rootScope.$broadcast("network offline");
        }
    }, false);
}

Cordova插件url。

$ rootScope每次都不会更新

1 个答案: