Wie nachtriggern ng-if/ng-Show Animation, wenn $ http Cache

Question

Innerhalb einer Fabrik Service, habe ich

$ http.get (url, {Cache: true}) verwenden

Aus meiner Sicht verwende ich ng-if oder ng-show, um einen CSS-Übergang auszulösen.

Das Problem:

Es ist großartig für die erste Anforderung arbeitet, aber offensichtlich für die nächste Anforderung der gleichen Servicefunktion wird die Animation nicht erneut ausgelöst.

Gibt es eine Möglichkeit, die ng-if/ng-show-Animation zurückzusetzen/neu zu starten?

(Der Cache wird benötigt, damit ich Wartezeiten vermeiden kann, aber ich muss immer noch Opazitätsanimation zwischen verschiedenen Zuständen ausgelöst haben).

Vielen Dank!

app.factory('progService', function ($http) { 
    var progService= {}; 
    progService.getProgram = function() { 
     return $http.get(appInfo.api_url + 'pages/5', { cache: true}); 
    }; 
    return progService; 
}); 

app.controller('programController', function($scope, progService) { 
    progService.getProgram().then(function(res){ 
     $scope.program = res.data; 
    }); 
}); 

<div ng-if="program.aJsonKey"></div> 

Answer 1

Sie wahrscheinlich Ihre eigene Flagge in diesem Fall einrichten müssen. zum Beispiel:

app.controller('programController', function($scope, progService) { 

    $scope.programDisplay = false; 

    progService.getProgram().then(function(res){ 
     $scope.program = res.data; 
     angular.element(document).ready(function() { 
      $scope.programDisplay = true; 
     }); 
    }); 
}); 

dann

<div ng-if="program.acf.exerpt && programDisplay"></div> 

Answer 2

Ihre Ansicht nicht aktualisiert, da Sie das gleiche, im Cache gespeicherten Objekt vorbei sind. Um den $ Watcher von ngIf auszuführen, sollten Sie ein "neues"/neues Objekt bereitstellen. Sie müssten wahrscheinlich auch den Zustand ändern, weil ngIf wahr oder falsch erwarten würde.

app.controller('programController', function($scope, progService) { 
    $scope.program = null; 
    progService.getProgram().then(function(res){ 
     $scope.program = angular.copy(res.data); // Returns a copy of the object. Always a new object! 
    }); 
});