Привязка данных в localStorage с помощью ngStorage - что здесь не так?

Question

Я начал этот путь, пытаясь сохранить некоторые настройки с помощью localStorage, у меня возникли некоторые проблемы и я написал об этом здесь (без решения): Почему эти данные не будут связаны? Странный случай в Angularjs

Я отказался от этого метода, когда узнал о ngStorage. В теории ngStorage позволяет вам двухстороннее связывание в и из угловых моделей. Это отличная теория.

У меня проблемы с этим, хотя. Это наполовину работает.

Идея заключается в следующем:

1. Проверка выбора разрешения (истина или ложь).
2. Если нет выбора (первое использование), всплывающее окно выбора.
3. Храните выбор.
4. При перезапуске используйте сохраненный выбор, чтобы установить разрешение true или false.
5. Разрешить пользователю изменять разрешение из приложения.

Работает до номера 4.

Тестирование показывает, что хотя при первом использовании я могу установить для $storage.analytics значение true или false, последующие изменения не сохраняются и не извлекаются из локального хранилища.

Вот код:

permissionCallback = function(permission){  
  if(permission===1){
      console.log("analytics allowed");
      analytics.startTrackerWithId('UA-45544004-1'); 
      $scope.$storage.analytics=true;
      navigator.notification.alert('You can turn analytics off in the Data Tracking section at any time.', null, 'Analytics On', 'OK');
  }else{
      console.log("analytics denied");
      $scope.$storage.analytics=false;
      navigator.notification.alert('You can turn analytics on in the Data Tracking section at any time.',null , 'Analytics Off', 'OK');
  }
}

if(typeof $scope.$storage.analytics === 'undefined'){
  navigator.notification.confirm('This app would like your permission to collect data on how you use the app. No personal or user identifiable data will be collected.', permissionCallback, 'Attention', ['Allow','Deny']);
}
else{
  console.log('start analytics are', $scope.$storage.analytics); 
  if(typeof analytics !== 'undefined'){
    console.log("analytics functioning");
    analytics.startTrackerWithId('UA-45544004-1'); 

      $scope.trackClick = function(category, action){
        analytics.trackEvent(category, action); 
        console.log('Tracking category: ' + category + ', Section: ' + action + '.');
      }
  }
}
$scope.counter = 0;
$scope.change = function(){
  $scope.counter++;
  console.log('analytics are ' + $scope.$storage.analytics);
}

А вот и HTML.

<li class="item item-toggle">
<i class="icon ion-cloud"></i> Data Tracking is {{$storage.analytics}} {{counter}}
<label class="toggle toggle-balanced">
<input type="checkbox" ng-model="$storage.analytics" ng-change="change()">
     <div class="track">
             <div class="handle"></div>
    </div>
  </label>
</li>

Это либо ошибка моей логики, либо, как мне кажется, скорее всего, неправильное понимание объема данных.

Странно, что консольный журнал в функции change() (предназначенный исключительно для отслеживания этих вещей) всегда корректен. Таким образом, использование $storage.analytics в html является правильным способом сделать это (использование $scope.storage.analytics вызывает всевозможные ошибки), и это действительно привязка из html в $scope.storage.analytics.

Так почему бы не сохранить его в локальном хранилище при использовании переключателя?

Answer 1

Я столкнулся с аналогичной проблемой с ng-хранилищем. Когда страница была загружена / перезагружена, все, что связано со значением в $sessionStorage, было обновлено правильно. Однако любые изменения в $sessionStorage впоследствии не были отражены на мой взгляд. В итоге я создал сервис для хранения изменений и использовал $sessionStorage в качестве временного хранилища данных.

app.controller('TestController', funciton($scope, $sessionStorage, Service) {
    // if we have session data set our service
    if($sessionStorage.data) {
        Service.data = $sessionStorage.data;
    } else {
        $sessionStorage.data = {};
    }

    // now bind scope to service
    scope.data = Service.data;

    // on update we set both Service and $sessionStorage
    // scope.data will be automatically updated
    scope.update = function(val)  {
        Service.data.value = val;
        $sessionStorage.data.value = val;
    }
});

app.service('TestService', function() {
    var service = {
        data: {
            value: 'Hello World'
        }
    };
    return service;
});

<div ng-controller="TestController">{{data.value}}</div>
<button ng-click-"update('Hello Universe')">Update</button>

Это очень простой пример того, как работает мое решение, но, надеюсь, оно застрянет в той же ситуации на правильном пути.