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

AngularJS - show/hide elements from rootscope

本文关键字：范围内 元素 隐藏 显示 AngularJS      更新时间：2023-09-26

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

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

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

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

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

然后在我的索引中.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，但仍然没有显示消息。

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

document.addEventListener("offline", function() {
    $rootScope.$apply(function(){
        $rootScope.offline = true;
    })
}, false);
相关文章：