在控制器中使用$ localStorage

时间:2017-01-12 09:54:59

标签: javascript angularjs

说明

我有一个用户信息屏幕,我们获取用户详细信息,并在选择save时将其存储在数据库中(仅激活一次)。我在我的控制器中按顺序使用$localStorage来保存用户输入的数据,这样当app关闭并打开时,存在相同的信息。此外,在编辑信息时,应在设置中查看更改,并将其存储在数据库和$localStorage中。

问题:

当我尝试保存数据时出现错误Error: [$injector:unpr] Unknown provider: $localStorageProvider <- $localStorage <- revenue-management-controller。这是我第一次尝试使用$localStorage,我不确定我是否正确使用它。我试图使用两个$localStorage,一个用于在save操作期间存储数据。另一个在update行动期间。所以请帮忙。

HTML:

Name:
<input type="text ng-model="name">
DOB:
<input type="date" ng-model="dob">
Area of Interest:
<input type="text" ng-model="interest">

<button type="submit" ng-click="Add()">Add</button>
<button type="submit" ng-click="update()">Update</button>

控制器:

myApp.controller('userInfo', function ($scope, $state, $localStorage, userDataManagement) {

        $scope.Add = function () {
            var userData = {'name': $scope.name, 'dob': $scope.dob, 'interest': $sope.interest};
            $localStorage.savedInfo = userData;
            userDataManagement.postData(userData, error);
        };
        $scope.update = function () {
            var userData2 = {'name': $scope.name, 'dob': $scope.dob, 'interest': $scope.interest};
            $localStorage.updateInfo = userData2;
            userDataManagement.postData(userData2, error)
        };
    }
)

2 个答案:

答案 0 :(得分:0)

  

错误:[$ injector:unpr]未知提供商:

如果您错过了依赖项,则始终会抛出此错误。此Click Here是您必须添加以使用$localstorage的模块。看一下模块和语法。

或者您可以使用$window.localStorage,确保$window位于参数部分。

答案 1 :(得分:0)

确保正确安装localstorage模块并将其添加到项目中: https://github.com/grevory/angular-local-storage

<!doctype html>
<html ng-app="myApp">
<head>

</head>
<body>
    ...
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
    <script src="bower_components/js/angular-local-storage.min.js"></script>
    ...
    <script>
        var myApp = angular.module('myApp', ['LocalStorageModule']);

    </script>
    ...
</body>
</html>

之后,您可以在控制器中安装$ localstorage: 设置一个值:

myApp.controller('MainCtrl', function($scope, localStorageService) {
  //...
  function submit(key, val) {
   return localStorageService.set(key, val);
  }
  //...
});

得到一个值:

myApp.controller('MainCtrl', function($scope, localStorageService) {
  //...
  function getItem(key) {
   return localStorageService.get(key);
  }
  //...
});

所以对于你的控制器来说就是这样的:

myApp.controller('userInfo',function($scope, $state, localStorageService, userDataManagement){

       $scope.Add=function(){
             var userData={'name':$scope.name, 'dob':$scope.dob, 'interest':$sope.interest};
             localStorageService.set("savedInfo",userData);
           userDataManagement.postData(userData,error);
};
         $scope.update=function(){
             var userData2 = {'name':$scope.name, 'dob':$scope.dob, 'interest':$scope.interest);
            localStorageService.set("updateInfo", userData2;
            userDataManagement.postData(userData2,error);
              };
})