DOM nie odświeża się po zmodyfikowaniu Angular $ scope

Question

Mam aplikację internetową HTML5 offline, która wykorzystuje Angular. Chcę wbudować dwa przyciski. Należy sprawdzić dostępność aktualizacji, inne powinny zastosować aktualizacje.

• Jeśli aktualizacja jest gotowa, przycisk Sprawdź aktualizacje nie powinien być widoczny, ale przycisk Zastosuj aktualizacje powinien być.
• Jeśli aktualizacja nie jest gotowa, przycisk Sprawdź aktualizacje powinien być widoczny, ale przycisk Zastosuj aktualizacje nie powinien być.

Wykonuję tę logikę za pomocą kontrolera nawigacyjnego.

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

To jest okablowany w moim 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> 

Oto co faktycznie kończy się dzieje:

1. zaktualizować pamięć podręczną aplikacji oczywisty na serwerze.
2. Naciskam przycisk Sprawdź aktualizacje w kliencie. W konsoli JS widzę, jak wyciąga zaktualizowane zasoby i widzę komunikat dziennika "Update ready".
3. W tym momencie oczekuję, że mój interfejs użytkownika zaktualizuje się i wyświetli przycisk Zastosuj aktualizacje, ale tak się nie stanie. Przycisk Sprawdź aktualizacje jest nadal widoczny, więc klikam to.
4. Pojawi się przycisk Aktualizuj aplikację. Klikam to i odpowiednio ładuję stronę.

Tak więc w kroku 3 powyżej oczekuję przycisku Aktualizuj aplikację z powodu zmiany $scope.ApplicationUpdateReady. Dlaczego to nie działa i muszę nacisnąć go po raz drugi, aby wyświetlić przycisk Aktualizuj aplikację?

Answer 1

dwie rzeczy:

1. Charakter prymitywów JavaScript, a sposób ich uchwyty kątowe.
2. Zapotrzebowanie na $scope.$apply na zdarzenia poza skrótem Angular.

Patrz poniżej:

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