Question

我使用ngStorage（https://github.com/gsklee/ngStorage）将一些数据存储在浏览器的localStorage中。

我有这个标记

<ul class="cards">
    <li ng-repeat="card in cards">
        <card></card>
    </li>
</ul>

使用“卡片”（如你所见）指令，存储每张卡片的模板。

在我的控制器中，我有这种方法在ng-repeat阵列卡中推送卡片：

 angular.controller('CustomerController', function($scope, $localStorage, $sessionStorage) {
      $scope.cards = [];
      $scope.addCardRed = function() {
          return $scope.cards.push(new Card("red"));
      };
(...)
});

到目前为止这是有效的。但我无法完成将卡存放在我的ul中。我尝试了一些变体：

 (...)
 $scope.$storage = $localStorage;
 $scope.cards = [];
 $localStorage.cards = [];
 $localStorage.cards = $scope.cards;

但我的卡片不再显示在列表中，或者列表不会被存储。如何将我的卡元素存储在列表中？我做错了什么？

Answer 1

我认为，您的Card不是简单的JavaScript对象。因此你可能想要使用这样的东西：

angular.module('storage',[]).factory('cardStorage',function(){
var key = 'cards';
var store =  localStorage;

// Card has to be JSON serializable
function assign(value){store[key]=JSON.stringify(value)};

// return Card instances
function fetch(){return (JSON.parse(store[key])||[]).map(
  function(card){return new Card(card);
})};

return {
  bind:function(scope,attribute,defaults){
    // read from storage - in case no data in scope
    if(!(attribute in scope)){
      scope[attribute]=fetch();
    }
    // observe changes in cars and persist them
    scope.$watch(attribute,function(next,prev){
      assign(next);
    },true);
  }
}

});

并在您的控制器中

function(scope,cardStorage){
   cardStorage.bind('cards');
}

或者您可以使用： https://github.com/agrublev/angularLocalStorage

AngularJS中的LocalStorage指令

1 个答案: