修改Angular $ scope

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. 对Angular摘要之外的事件需要$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>