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

Question

我正在使用服务（工厂）来访问服务器端的数据，我正在使用$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);
});
});

现在，当我第二次运行我的应用程序时，巫毒教全部开始，而不是从服务器获取数据，HTTP请求从不触发。 相反，它向我显示了我上次运行数据时收集的数据。

我将不胜感激。

Answer 1

您正在直接调用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并从服务器获取新数据，而不仅是已经成功获取的数据。