使用 $http 缓存时如何重新触发 ng-if / ng-show 动画

Question

在工厂服务中，我必须使用

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

在我看来，我正在使用 ng-if 或 ng-show 来触发 CSS 转换。

问题：

第一次请求时效果很好，但显然对于相同服务功能的下一次请求，动画不会重新触发。

有没有办法重置/重新触发 ng-if / ng-show 动画？

（需要缓存所以我可以避免等待时间，但我仍然需要在不同状态之间触发不透明动画）。

谢谢！

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

在这种情况下，您可能需要设置自己的标志。例如：

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

然后

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

Answer 2

您的视图未更新，因为您传递的是相同的缓存对象。为了执行 ngIf 的 $watcher，你应该提供一个 "fresh"/new 对象。您可能还需要更改状态，因为 ngIf 会期望 true 或 false。所以在你的情况下应该是这样的：

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!
    });
});

使用 $http 缓存时如何重新触发 ng-if / ng-show 动画

How to retrigger ng-if / ng-show animation when using $http cache

javascript

angularjs

angular-http

ng-show

angular-ng-if