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

Question

I'm using a service(factory) to access my data on the server side, I'm using $routeParams to include the id to the request to the server. And this all works perfectly fine, but only the first time I run through the program, here is some of my code:

my controller:

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

my service:

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

and last but not least the route

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

I've already tried some things like:

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

and

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

Now the voodoo all starts when I run through my application for the second time, instead of getting the data from the server, the http request never fires. Instead it shows me the data gathered from the last time I ran through it.

I would appreciate any and all help.

Answer 1

You are calling the klusplan.success function directly. So you will always get the already fetched data.

If you write the factory like this:

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

And then inside the controller:

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

So you call everytime $http.get and getting new Data from the server instead of just the already successful fetched data.