javascript - $rootScope 并不每次都更新

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

发生的情况是，如果互联网断开连接，它会显示该栏，但当它再次回来时，它不会隐藏它，我也尝试过 ng-if ，当我更改页面时，它会隐藏回来，所以我想要真实的当值发生变化时，数据与 View 的绑定(bind)时间也应该改变 View 值

Answer 1

两个注意事项:

1. 使用 Angular 包装器 $window .
2. 区分开发(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 .