javascript - AngularJS - 显示/隐藏根作用域中的元素

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>

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

{{$root.offline}}

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

Answer 1

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

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