我已经为此挠头了一段时间，无法弄清楚为什么它不起作用。我已经实现了一个填充数组的 UI，我想将此数组存储在本地存储中。我在我的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但是，当我尝试从负责填充数组的刷卡 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>
当我使用简单的占位符函数对此进行测试时，我收到以下错误：
类型错误：
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
我不明白为什么这不起作用。任何帮助将不胜感激。