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

다시 확인하십시오. 오류가없는 오류가이 라인에 있어야합니다 : 그 상황에서 사용할 수라는 이름의 변수 myStorage이 없기 때문에

이 (localStorage에 대한 참조 myStorage 변경 :

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

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

당신은 그들을 변경해야 getItem/setItem은 localStorage의 기능입니다.

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

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