Javascript DOM不是'；在修改$scope后，无法刷新

我有一个HTML5离线网络应用程序，利用Angular。我想内置两个按钮。一个应该检查更新，另一个应该应用更新

• 如果更新已准备就绪，“检查更新”按钮不应可见，但“应用更新”按钮应可见
• 如果更新未准备就绪，则“检查更新”按钮应可见，但“应用更新”按钮不应可见

我通过导航控制器来实现这个逻辑

TermaPocketBookModule.controller("NavigationController", ['$scope', '$rootScope', function ($scope, $rootScope) {

    //check to see if an update is available when the application starts
    if (window.applicationCache.status === window.applicationCache.UPDATEREADY) {
        $scope.ApplicationUpdateReady = true;
    }
    else {
        $scope.ApplicationUpdateReady = false;
    }

    //add handler to handle the DOM's updateready event.
    window.applicationCache.addEventListener('updateready', function () {
        console.log("Update ready.");
        $scope.ApplicationUpdateReady = true;
    });

    //button handler to apply an update
    $scope.ApplyUpdate = function () {
        console.log("Apply update clicked.");
        window.applicationCache.swapCache();
        location.reload();
    }

    //button handler to check for an update
    $scope.CheckForUpdate = function () {
        console.log("Checking for update.");
        window.applicationCache.update();
    }
}]);

这在我的HTML中有关联：

<ul class="nav navbar-nav" ng-controller="NavigationController">
    <li ng-if="ApplicationUpdateReady"><a ng-click="ApplyUpdate()">Update Application</a></li>
    <li ng-if="ApplicationUpdateReady != true"><a ng-click="CheckForUpdate()">Check for Updates</a></li>
</ul>

更新应用程序
检查是否有更新

以下是实际发生的情况：

我更新服务器上的应用缓存清单

我按下客户端中的检查更新按钮。在JS控制台中，我看到它下拉更新的资源，并看到日志消息“updateready”

此时，我希望我的UI能够更新并显示ApplyUpdates按钮，但它没有。“检查更新”按钮仍然可见，因此我单击该按钮

此时会出现“更新应用程序”按钮。我点击它，它会正确地重新加载站点

因此，在上面的步骤3中，我希望由于更改

$scope.ApplicationUpdateReady

而出现更新应用程序按钮。为什么这不起作用，我必须再次按下它才能显示“更新应用程序”按钮？

这里有两件事：

JavaScript原语的性质，以及Angular处理它们的方式

需要对角度摘要之外的事件进行分析

见下文：

$scope.model = {};
$scope.model.ApplicationUpdateReady = false;

window.applicationCache.addEventListener('updateready', function () {
    console.log("Update ready.");
    $scope.model.ApplicationUpdateReady = true;
    $scope.$apply();
});

<ul class="nav navbar-nav" ng-controller="NavigationController">
    <li ng-if="model.ApplicationUpdateReady"><a ng-click="ApplyUpdate()">Update Application</a></li>
    <li ng-if="model.ApplicationUpdateReady != true"><a ng-click="CheckForUpdate()">Check for Updates</a></li>
</ul>

$scope.model={}；
$scope.model.ApplicationUpdateReady=false；
window.applicationCache.addEventListener（'updateready'，function（）{
log（“更新准备就绪”）；
$scope.model.ApplicationUpdateReady=true；
$scope.$apply（）；
});

更新应用程序
检查是否有更新