AngularJS - 显示/隐藏来自rootscope的元素

Question

我正在通过添加事件监听器来监听丢失网络连接的应用程序。

当应用程序离线时，我需要显示一条消息。

以下代码似乎对我不起作用。

我在应用程序运行方法中添加了事件侦听器，以便全局可用：

document.addEventListener("offline", function() {
    $rootScope.offline = true;
}, false);

然后在我的index.html中显示隐藏基于$ rootScope变量的消息：

<div id="network-msg" ng-show="$root.offline">
    <div class="full-overlay" ng-show="$root.offline">
        <p class="txt-center">No internet connection</p>
        <p class="txt-center">Trying to re-connect</p>
    </div>
</div>

当我离线时，我可以看到varibale正在更新，但消息没有显示。所以，如果我输出：

{{$root.offline}}

在页面上我可以看到它正确地从false切换到true但仍然没有显示消息。

Answer 1

由于值是在dom事件处理程序中更新的，因此必须在$apply回调

中进行更改

document.addEventListener("offline", function() {
    $rootScope.$apply(function(){
        $rootScope.offline = true;
    })
}, false);