javascript - Angular JS : How to avoid loss of data of $http call on page refresh?

标签 javascript angularjs google-maps google-maps-api-3 local-storage

前提:

我知道 StackOverflow 上也有类似的问题,如果我问这个问题,是因为该解决方案不适用于我的情况(或者我无法正确应用它们)。

情况:

我有一个 Angular js 应用程序,其中包含 map 和一系列标记,这些数据和位置是从数据库中检索的。该应用程序运行良好。我正在使用 Angular-gm 模块:https://github.com/dylanfprice/angular-gm我非常喜欢它。 当我单击导航链接时,我会被重定向到带有 map 的正确页面,并且我会看到 map 上的所有标记。

问题是,当我刷新页面时,我会丢失所有标记,因为这些标记是通过 $http 调用检索的。

代码:

   // Initialising the markers array.
  $scope.markers= [];

  // Getting the list of markers through $http call.
  $http({
    url: 'main/json_get_markers',
    method: "POST",
   }).success(function (data) {
        $scope.markers = data;
     });

可能的解决方案:

在 StackOverflow 和 google 中搜索,我找到了一些可能的解决方案:

  1. 使用$route.reload();

    如果这是正确的解决方案,那么问题是: 我怎样才能准确应用 $route.reload();在这种情况下?因为我不明白我到底要把它放在哪里。如果我把它放在 Controller 中,它会生成一个无限循环,这意味着页面不断刷新。那么到底应该放在哪里呢?

  2. 使用ngStorage模块:http://ngmodules.org/modules/ngStorag 我发现这在演示中运行良好,但我尝试将其应用到我的案例中,但无法获得任何结果。 因此,如果这是正确的解决方案,那么问题将是:如何重写 $http 调用以便将结果保存到 $localStorage 中?

最佳答案

好吧,我认为如果您进行这些更改,它应该可以解决不总是加载数据时剩余的问题。

myApp.factory('markersRepository', function($http){ 
    var markersRepository = {
       getAllMarkers: function(){
           var url = "main/json_get_markers";
           var promise = $http.get(url).then(function(response){
               return response.data;
           });
           return promise;
       }
    };
    return markersRepository;
});  

function MapController ($scope, markersRepository){
    markersRepository.getAllMarkers().then(function(markerData){
        $scope.markers= markerData
    });
});

我希望这会有所帮助——干杯!

关于javascript - Angular JS : How to avoid loss of data of $http call on page refresh?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23543468/

相关文章:

Javascript条件输入id语句

javascript - 了解使用 AngularJS promises,它们将如何帮助解决这个问题

javascript - 如果选中复选框,Angularjs 禁用按钮

javascript - ImageMapType 上的水平重复 Google map 标记

javascript - jquery弹出窗口仅拉动最后一个弹出div

javascript - onClick 在渲染时调用

javascript - "top"相同值的属性显示不同

javascript - 在 Protractor/E2E 测试中访问 $http 数据 (AngularJS)

android - Kotlin : On camera move end

google-maps - 如何为gmap.js添加自定义标记?