Question

我现在已经摸不着头脑了一段时间，无法弄清楚为什么这不起作用。我已经实现了一个填充数组的UI，我想将这个数组存储在localstorage中。我创造了“节省时间”的时间。我的services.js文件中的工厂如下：

angular.module('myApp.Services', [])
.factory('$localstorage', ['$window', function($window) {
        return {
            set: function(key, value) {
                $window.localStorage[key] = value;
            },
            get: function(key, defaultValue) {
                return $window.localStorage[key] || defaultValue;
            },
            setObject: function(key, value) {
                $window.localStorage[key] = JSON.stringify(value);
            },
            getObject: function(key) {
                return JSON.parse($window.localStorage[key] || '{}');
            }
        }
    }])

当我使用以下代码在controllers.js file之上进行测试时，一切都很好，控制台会打印字符串和对象。大。

angular.module('myApp.Controllers', ['myApp.Services'])
    .run(function($localstorage) {
  $localstorage.set('name', 'Max');
  console.log($localstorage.get('name'));
  $localstorage.setObject('post', {
    name: 'Thoughts',
    text: 'Today was a good day'
  });

  var post = $localstorage.getObject('post');
  console.log(post);
})

然而，当我尝试从负责填充interests数组的swipecard UI的控制器（如下所示）中保存到localstorage时出现问题。

.controller('CardsCtrl', function($scope, $localstorage) {
        //console.log('CARDS CTRL CALLED');
        var cardTypes = [
            {image: 'img/movies.jpg', title: 'Movies', like: false},
            {image: 'img/comedy.jpg', title: 'Comedy', like: false},
            {image: 'img/technology.jpg', title: 'Technology', like: false},
            {image: 'img/news.jpg', title: 'News', like: false},
            {image: 'img/entertainment.jpg', title: 'Entertainment', like: false}

        ];
        //to hold array of interests
        $scope.interests = [];
        var interests = $scope.interests;
        $scope.cards = Array.prototype.slice.call(cardTypes, 0);

        $scope.addCard = function () {
            var newCard = cardTypes[(cardTypes.length) + 1];
            $scope.cards.push(angular.extend({}, newCard));
        };

        //Right-Swipe = The user likes this topic
        $scope.transitionRight = function (card) {
            console.log('card removed to the right');
            card.like = true;
            $scope.interests.push(card.title);
            console.log(card);

        };
        //Left-Swipe = user does not like this topic - do nothing
        $scope.transitionLeft = function (card) {
            console.log('card removed to the left');
            console.log(card);
        };

        $scope.cardSwipedLeft = function (index) {
            console.log('Left swipe');
        };

        $scope.cardSwipedRight = function (index) {
            console.log('Right swipe');
        };

        $scope.transitionOut = function (card) {
            console.log('card transition out');
        };

        $scope.cardDestroyed = function (index) {
            $scope.cards.splice(index, 1);

        };

        $scope.saveInterests = function ($localstorage){

            $localstorage.set('name', 'Max');
            console.log($localstorage.get('name'));
            $localstorage.setObject('post', {
                name: 'Thoughts',
                text: 'Today was a good day'
            });

            var post = $localstorage.getObject('post');
            console.log(post);
        };
    });

在标记中，我添加了saveInterests函数以触发按钮单击事件：

<ion-pane no-scroll ng-controller="CardsCtrl">
        <ion-header-bar align-title="center" class="bar-custom">
            <h1 class="headerTitle title">Interests</h1>
            <div class="buttons">
                <button style="color: #ffffff" class="button button-icon icon ion-arrow-right-c"></button>
                </div>
        </ion-header-bar>

        <td-cards>
                <td-card id="td-card" ng-repeat="card in cards"
                         on-transition-left="transitionLeft(card)"
                         on-transition-right="transitionRight(card)"
                         on-transition-out="transitionOut(card)"
                         on-destroy="cardDestroyed($index)"
                         on-swipe-left="cardSwipedLeft($index)"
                         on-swipe-right="cardSwipedRight($index)"
                         on-partial-swipe="cardPartialSwipe(amt)">
                <div class="image">
                    <div class="no-text">
                        <img class="imgNo" src="img/dislike.png"/>
                    </div>
                    <img class="swipeImg" ng-src="{{card.image}}">
                    <div class="yes-text">
                        <img class="imgYes" src="img/like.png"/>
                    </div>
                </div>
            </td-card>
        </td-cards>
    <button ng-click="saveInterests()">
        <img id="actionTopBtn" src="img/preSnap.png"/>
        <img id="actionBottomBtn" src="img/snap.png"/>
    </button>
</ion-pane>

当我使用简单的占位符函数测试时，我收到以下错误：

enter image description here

类型错误：

TypeError: Cannot read property 'set' of undefined
    at Scope.$scope.saveInterests (controllers.js:159)
    at $parseFunctionCall (ionic.bundle.js:20124)
    at ionic.bundle.js:50863
    at Scope.$get.Scope.$eval (ionic.bundle.js:22178)
    at Scope.$get.Scope.$apply (ionic.bundle.js:22276)
    at HTMLButtonElement.<anonymous> (ionic.bundle.js:50862)
    at HTMLButtonElement.eventHandler (ionic.bundle.js:10823)
    at triggerMouseEvent (ionic.bundle.js:2811)
    at tapClick (ionic.bundle.js:2800)
    at HTMLDocument.tapTouchEnd (ionic.bundle.js:2918)ionic.bundle.js:19387 (anonymous function)ionic.bundle.js:16350 $getionic.bundle.js:22278 $get.Scope.$applyionic.bundle.js:50862 (anonymous function)ionic.bundle.js:10823 eventHandlerionic.bundle.js:2811 triggerMouseEventionic.bundle.js:2800 tapClickionic.bundle.js:2918 tapTouchEnd

我不明白为什么这不起作用。非常感谢任何帮助。

Answer 1

将$localstorage更改为$localStorage，它应该有效。

（注意资本S的变化）

Angular.js / Ionic：$ localstorage未定义错误

1 个答案: