Angular app仅在刷新后显示调整后的动态内容

时间:2015-07-01 15:45:28

标签: javascript angularjs http caching

我正在使用服务(工厂)访问服务器端的数据,我正在使用$routeParams将ID包含在服务器的请求中。这一切都很好,但只有我第一次运行程序时,这里是我的一些代码:

我的控制员:

klusplan.success(function(data) {
    console.log("onsucces",data);
    $scope.klusplan = data[0];
    $scope.klusplan.duratie = localStorage.getItem('Duration');
    $scope.klusplan.orderId = localStorage.getItem('klusplan');
    var tijdInUren = localStorage.getItem('Duration').split(":");
    var Uren = tijdInUren[0];
    var Minuten = tijdInUren[1];
    Uren = Uren + (Minuten / 60);

    $scope.klusplan.kosten = ($scope.klusplan.vm_kl_tarief * Uren);
});

我的服务:

 app.factory('klusplan', ['$http', '$routeParams', function($http, $routeParams) {
return $http.get('http://localhost:8080/getdata/klusplan.php?id='+$routeParams.klplan_id)

.success(function(data, status) {
    console.log("succes", data, status);
    return data;
})
.error(function(err) {
    return err;
}); 
}]);

最后但并非最不重要的路线

.when('/klusplan/:klplan_id', {
        controller: 'KlusplanController',
        templateUrl: 'views/klusplan.html'
    })

我已经尝试了一些类似的事情:

$httpProvider.defaults.headers.get['If-Modified-Since'] = 'Mon, 26 Jul 1997 05:00:00 GMT';
$httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
$httpProvider.defaults.headers.get['Pragma'] = 'no-cache';

app.run(function($rootScope, $templateCache) {
$rootScope.$on('$routeChangeStart', function(event, next, current) {
        console.log("event: ", event," next: ", next," current: ", current)
        $templateCache.remove(current.templateUrl);
});
});

现在,当我第二次运行我的应用程序时,所有voodoo都会启动,而不是从服务器获取数据,http请求永远不会触发。相反,它向我显示了我上次运行时收集的数据。

我将非常感谢所有人的帮助。

1 个答案:

答案 0 :(得分:0)

您正在直接调用klusplan.success函数。因此,您将始终获取已经获取的数据。

如果你这样写工厂:

app.factory('klusplan', ['$http', '$routeParams', function($http, $routeParams) {
  return { 
    getData: function() { 
      return $http.get('http://localhost:8080/getdata/klusplan.php?id='+$routeParams.klplan_id);
    }
  };
}]);

然后在控制器内:

klusplan.getData().then(function(data) { ...

因此,您每次$http.get调用并从服务器获取新数据,而不仅仅是已经成功获取的数据。