AngularJS - 显示/隐藏Rootcope的元素

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}} 

页面上，我可以看到它从假切换到真实正确，但仍然没有显示消息。

Answer 1

由于该值在DOM事件处理程序更新，变化必须是$apply回调

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