Question

我正在构建一个移动应用程序（带有离子），它将发出一个更新视图的http请求。但我希望在ajax调用获取新数据时显示旧值。我的想法是使用localStorage。我将显示来自localStorage的旧数据，一旦ajax调用带回我想要更新localStorage的新数据。所以我试图使用ngStorage。但它根本不起作用。这是代码的样子：控制器

angular.module('starter.controllers', ['ngStorage'])
.controller('Ctrl', function($scope, $localStorage){
  $scope.$storage = $localStorage;
})

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.10/ngStorage.js"></script>
  </head>
  <body ng-app="starter">

    <div ng-controller="Ctrl">
      {{$storage.x}}
    </div>

和本地存储是这样的：

Storage {x: "This should be attached to HTML"}

知道我做错了什么吗？

Answer 1

尝试此操作进行数据绑定

angular.element($window).on('storage', function(event) {
    if (event.key === 'my-storage') {
      $rootScope.$apply();
    }
  });

您可以将其包装在工厂中

app.factory("LS", function($window, $rootScope) {
  angular.element($window).on('storage', function(event) {
    if (event.key === 'my-storage') {
      $rootScope.$apply();
    }
  });
  return {
    setData: function(val) {
      $window.localStorage && $window.localStorage.setItem('my-storage', val);
      return this;
    },
    getData: function() {
      return $window.localStorage && $window.localStorage.getItem('my-storage');
    }
  };
});

将视图绑定到localStorage值

1 个答案: