LocalStorage с директивой в AngularJS

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