AngularJS - 从根范围显示/隐藏元素

Question

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

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

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

我在应用程序的run方法中添加了事件监听器，使其全局可用：

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>

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

{{$root.offline}}

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

Answer 1

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

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