修改Angular $ scope后DOM没有刷新

Mason 发表于 Dev

石匠

我有一个利用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>

这实际上是实际发生的情况：

我更新了服务器上的应用程序缓存清单。
我按客户端中的“检查更新”按钮。在JS控制台中，我看到它下拉了更新的资源，并且看到了日志消息“更新准备就绪”。
此时，我希望我的UI更新并显示“应用更新”按钮，但不会。“检查更新”按钮仍然可见，因此我单击了它。
出现更新应用程序按钮。我单击该按钮，它将正确重新加载该站点。

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

lucky7id

这里有两件事：

JavaScript基元的性质以及Angular处理它们的方式。
需要$ 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。