Ionic:为什么我的基于$ localStorage的对象数组在设备上未定义?

时间:2015-08-04 14:20:18

标签: angularjs ionic-framework local-storage ionic ng-storage

我在服务中有一个基于$ localStorage的对象数组:

.service('storedService', function($localStorage){

this.$storage = $localStorage;

this.$storage.storedItems;

this.addToList = function(item){

this.$storage.storedItems.push(item);

};

})

对象数组用于控制器:

.controller('storedController', function($scope, $ionicPopup, $http,     $localStorage, itemListService, storedService) {

$scope.storedItems = storedService.$storage.storedItems;

$scope.showPopup = function() {

var i = 0;
//Pictures array stores 10 hits with URL of images
$scope.pictures = [];
//newitem is the new object pushed to items array
$scope.newitem = {}


$scope.getPic = function(name) {

    $http.get('https://www.googleapis.com/customsearch/v1?key=AIzaSyDKzJO_2-a82Jrn0sA2oSnDgHORcJegCAA&cx=011061616694035020478:dvpxju__yje&searchType=image&lr=lang_no&q=' + name).then(function(resp) {
        console.log('Success', resp.data.items);
        $scope.pictures = resp.data.items;
        $scope.newitem.pic = resp.data.items[0].image.thumbnailLink;
    })

    $scope.changePic = function() {

        if (i == 10) {

            i = 0;

        } else {
            i++;
        }
        $scope.newitem.pic = $scope.pictures[i].image.thumbnailLink;

    }

}

var myPopup = $ionicPopup.show({
    template: '<form ng-submit="getPic(newitem.name)"><input type="text" placeholder="Item name" ng-model="newitem.name" ng-blur="getPic(newitem.name)"></br><img alt="Press me!" src="{{newitem.pic}}" style="display:block;width:100px;height:100px;margin-left:auto;margin-right:auto;" ng-click="changePic()"></form>',
    title: 'Add new item to list',
    subTitle: 'Tip:Tap the image to change it',
    scope: $scope,
    buttons: [{
        text: 'Cancel'
    }, {
        text: '<b>Save</b>',
        type: 'button-positive',
        onTap: function(e) {
            storedService.addToList($scope.newitem);
        }
    }]
});
}

$scope.data = {

showDelete: false

};

$scope.moveToItems = function(item){

itemListService.addToList(item);

};


})

这将获取一个对象并将其存储在对象数组中。这一切在浏览器中运行良好,但在Ionic View和设备上它不起作用。它显示为未定义。为什么浏览器中没有未定义?我做错了什么?

2 个答案:

答案 0 :(得分:2)

你的问题是,如果localStorage中当前没有存储任何内容,storedItems不是数组且未定义

当服务初始化并分配$ storage时,检查是否定义了storedItems,如果没有为其分配空数组

this.$storage = $localStorage;
if(!this.$storage.storedItems){
   this.$storage.storedItems =[];
}

答案 1 :(得分:0)

也许设备比浏览器慢。尝试将代码包装在$ionicPlatform.ready(function () { //**code*/})