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

Question

我有一个使用Angular的HTML5离线网络应用程序.我想建立两个按钮.一个应该检查更新,另一个应该应用更新.

• 如果更新已准备就绪,则不应显示"检查更新"按钮,但应该应用"应用更新"按钮.
• 如果未准备好更新,则应显示"检查更新"按钮,但不应显示"应用更新"按钮.

我通过导航控制器做这个逻辑.

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. 我按下客户端中的Check For Updates按钮.在JS控制台中,我看到它下拉了更新的资源,我看到日志消息"Update ready".
3. 此时,我希望我的UI更新并显示"应用更新"按钮,但事实并非如此."检查更新"按钮仍然可见,因此我单击该按钮.
4. 出现"更新应用程序"按钮 我点击它,它正确地重新加载网站.

因此,在上面的步骤3中,我希望更新应用程序按钮由于更改而出现$scope.ApplicationUpdateReady.为什么这不起作用,我必须再按一次才能显示更新应用程序按钮？

Answer 1

这里有两件事:

1. JavaScript原语的本质,以及Angular处理它们的方式.
2. 需要$ scope.$适用于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>