0

角度が新しく角度アプリケーションのローカルストレージを実装しようとしています。私は基本的なCRUD操作を持っています。私は私のコントローラからinsert()関数を呼び出すとき、私はタイトルにエラーを取得し、オブジェクトを挿入するときにAngularJs: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 'MYSTORAGEは未定義である'

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)に電話しようとすると、コンソールにエラーがスローされます。

答えて

0

もう一度確認してください。エラーが存在しない場合、エラーはこれらの行にする必要があります

_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)); 
    }, 
関連する問題