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

Angular app only shows adjusted dynamic content after refresh

本文关键字：动态 调整 显示 刷新 Angular 应用程序      更新时间：2023-09-26

我在服务器端使用服务（工厂）访问我的数据，我使用$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请求从未启动，而不是从服务器获取数据。相反，它显示了我上次浏览它时收集的数据

我将感谢所有的帮助。

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

相关文章：