AngularJS - 顯示/隱藏來自rootscope的元素

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

在頁面上我可以看到它正確地從false切換到true但仍然沒有顯示消息。

Answer 1

由於值是在dom事件處理程序中更新的，因此必須在$ apply回調中完成更改

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