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

现在，当我第二次运行我的应用程序时，voodoo 全部启动，而不是从服务器获取数据，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 并从服务器获取新数据，而不仅仅是已经成功获取的数据。