AngularJs: myStorage является неопределенной ошибкой при вставке объекта

Question

Я новичок в угловой, и я пытаюсь реализовать локальное хранилище для моего углового приложения. У меня есть основные операции CRUD. Когда я вызываю функцию insert() от моего контроллера я получаю ошибку в названии 'MyStorage неопределен'

MyApp.js

var MyApp = angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache', 'ngRoute']) 
    .config(function ($routeProvider) { 
     'use strict'; 

     var routeConfig = { 
      controller: 'ButtonCtrl', 
      templateUrl: 'index.html', 
      resolve: { 
       store: function (myStorage) { 
        // Get the correct module (API or localStorage). 
        return myStorage.then(function (module) { 
         module.get(); // Fetch the todo records in the background. 
         return module; 
        }); 
       } 
      } 
     }; 

     $routeProvider 
      .when('/', routeConfig) 
      .when('/:status', routeConfig) 
      .otherwise({ 
       redirectTo: '/' 
     }); 
    }); 

myStorage.js

var MyApp = angular.module('MyApp'); 

MyApp.factory('myStorage', ['$q', function($q) { 
    console.log('store init'); 

    var STORAGE_ID = 'my_app'; 

    var store = { 
     dataStore: [], 

     _getFromDataStore: function() { 
      return JSON.parse(myStorage.getItem(STORAGE_ID) || '[]'); 
     }, 

     _saveToDataStore: function() { 
      return myStorage.setItem(STORAGE_ID, JSON.stringify(dataStore)); 
     }, 

     delete: function(data) { 
      var deferred = $q.defer(); 

      store.dataStore.splice(store.dataStore.indexOf(data), 1); 

      store._saveToDataStore(store.dataStore); 
      deferred.resolve(store.dataStore); 

      return deferred.promise; 
     }, 

     get: function() { 
      var deferred = $q.defer(); 

      angular.copy(store._getFromDataStore(), store.dataStore); 
      deferred.resolve(store.dataStore); 

      return deferred.promise; 
     }, 

     insert: function(data) { 
      var deferred = $q.defer(); 

      store.dataStore.push(data); 

      store._saveToDataStore(store.dataStore); 
      deferred.resolve(store.dataStore); 

      return deferred.promise; 
     }, 

     put: function(data, index) { 
      var deferred = $q.defer(); 

      store.dataStore[index] = data; 

      store._saveToDataStore(store.dataStore); 
      deferred.resolve(store.dataStore); 

      return deferred.promise; 
     } 
    }; 


    return store; 
}]); 

ButtonCtrl.js

var MyApp = angular.module('MyApp'); 

MyApp.controller('ButtonCtrl', ['$scope', 'myStorage', function($scope, myStorage) { 

    $scope.store = myStorage; 

    $scope.addData = function() { 
     var o = new Object() 
     o.key = 'someKey'; 
     o.value = 'Hello, world'; 
     console.log($scope.store.dataStore); 
     $scope.store.insert(o); // Throws error myStorage is not defined. 
     console.log($scope.store.dataStore); 
    }; 
}]); 

В функции addData() используется линия console.log($scope.store.dataStore); выведет пустой массив на консоль. Но когда я пытаюсь позвонить $scope.store.insert(o), ошибка выносится на консоль.

Answer 1

Еще раз проверьте. Ошибка не существует, то ошибка должна быть в этих строках:

_getFromDataStore: function() { 
     return JSON.parse(myStorage.getItem(STORAGE_ID) || '[]'); 
    }, 

    _saveToDataStore: function() { 
     return myStorage.setItem(STORAGE_ID, JSON.stringify(dataStore)); 
    }, 

Вы должны изменить их:

(Изменить ссылку myStorage на localStorage, поскольку не существует переменная с именем myStorage доступны в этом контексте и getItem/setItem являются следующими: localStorage)

_getFromDataStore: function() { 
     return JSON.parse(localStorage.getItem(STORAGE_ID) || '[]'); 
    }, 

    _saveToDataStore: function() { 
     return localStorage.setItem(STORAGE_ID, JSON.stringify(dataStore)); 
    },