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