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



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

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

在我看来,我使用ng-if-ngshow来触发CSS转换。


问题:

它对第一个请求非常有效,但显然对于同一服务功能的下一个请求,动画不会被重新触发。

有没有办法重置/重新触发ng if/ng显示动画

(需要缓存,这样我就可以避免等待时间,但我仍然需要在不同状态之间触发不透明度动画)。

谢谢!


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>

您的视图没有更新,因为您正在传递相同的缓存对象。为了执行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!
    });
});
在这种情况下,您可能需要设置自己的标志。例如:
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>

最新更新