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