javascript - DOM ei päivity Angular $scopea muuttaessa

Minulla on HTML5-verkkosovellus, joka toimii offline-tilassa ja käyttää Angularia. Haluan lisätä siihen kaksi painiketta. Toisen tulisi tarkistaa päivitykset, toisen soveltaa päivitykset.

• Jos päivitys on valmis, Päivitä-painikkeen ei pitäisi olla näkyvissä, mutta Käytä päivityksiä -painikkeen pitäisi olla.
• Jos päivitystä ei ole valmiina, Tarkista päivitykset -painikkeen pitäisi olla näkyvissä, mutta Käytä päivityksiä -painikkeen ei pitäisi olla.

Teen tämän logiikan Navigointiohjaimen kautta.

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();
    }
}]);

Se on kytketty HTML:ääni:

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

Tässä on mitä todellisuudessa tapahtuu:

1. Päivitän sovelluksen välimuistin manifestin palvelimella.
2. Painan asiakkaassa Päivitä tarkistaminen -painiketta. JS-konsolissa näen sen lataavan päivitetyt resurssit ja näen lokiviestin "Päivitys valmis".
3. Tässä vaiheessa odotan, että käyttöliittymäni päivittyy ja näyttää Päivitä päivitykset -painikkeen, mutta se ei tee niin. Tarkista päivitykset -painike on edelleen näkyvissä, joten napsautan sitä.
4. Päivityssovelluspainike ilmestyy. Klikkaan sitä, ja se lataa sivuston uudelleen oikein.

Joten yllä olevassa vaiheessa 3 odotan, että Päivitä sovellus -painike ilmestyy, koska $scope.ApplicationUpdateReady muuttuu. Miksi se ei toimi ja minun täytyy painaa sitä toisen kerran, jotta Päivitä sovellus -painike ilmestyy?

Vastaus #1

Kaksi asiaa tässä:

1. JavaScriptin primitiivien luonne ja tapa, jolla Angular käsittelee niitä.
2. Tarve $scope.$apply:lle tapahtumissa Angularin digestin ulkopuolella.

Katso alla:

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