修改Angular $scope后，DOM不会刷新

Question

我有一个利用Angular技术的HTML5离线web应用程序。我想添加两个按钮，一个是检查更新，另一个是应用更新。

• 如果有可用的更新，则“检查更新”按钮不应显示，但“应用更新”按钮应该显示。
• 如果没有可用的更新，则“检查更新”按钮应该显示，但“应用更新”按钮不应显示。

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

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>

以下是实际发生的情况：

1. 我在服务器上更新应用程序缓存清单。
2. 我在客户端中点击“检查更新”按钮。在JS控制台中，我看到它下载了更新的资源，并出现了“更新就绪”的日志消息。
3. 此时，我希望我的用户界面会更新并显示“应用更新”按钮，但它没有。仍然可以看到“检查更新”按钮，所以我点击了那个按钮。
4. “更新应用程序”按钮出现了。我点击它，然后网站正确地重新加载。

因此，在上述第3步中，由于更改了$scope.ApplicationUpdateReady，我希望会出现“更新应用程序”按钮。为什么这不起作用，我必须再次按一下才能出现“更新应用程序”按钮？

- mason

Answer 1

这里有两个问题:

1. JavaScript基本类型的特性，以及Angular处理它们的方式。
2. 在Angular digest之外的事件中需要使用$scope.$apply。

请参见下文:

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

- lucky7id