关于angular的$resource中的isArray属性问题

在之前的文章中讲到了在使用$resource的时候,有一个isArray属性. 这个属性在两个地方有提到:

1. angular学习笔记(二十八)-$http(6)-使用ngResource模块构建RESTful架构

$resource的四个方法: query方法,get方法,save方法,remove方法,delete方法

这四个方法里,唯独query方法,它的isArray属性是true,所以,query接受到的数据是数组,而其余四个方法,接收到的数据必须不能是数组

2. angular学习笔记(二十八-附1)-$resource中的资源的方法

$resource的自定义方法: 比如该篇的栗子中使用的$charge方法,在定义自定义方法的时候,也要指定isArray属性.不指定的话默认是false.

 

如果我们不设置isArray为true,但是后台却给它返回一个数组资源,是会报错的.

那么,如果在使用get方法,save方法,remove方法,delete方法的时候,需要返回数组对象呢? 答案是不能的.因为$resource这个服务没有提供相应的配置方法.

那么,如果自定义一个方法,设置isArray为true,是不是就可以接受数组格式的返回值了呢? 答案是,要看情况! 

比如下面这段代码:

var notePad = angular.module('notePad',['ngResource']);
notePad.factory('myNotes',['$resource',function($resource){
    return $resource('/notes/:id',{id:'@id'},{mysave:{method:'POST',isArray:true}})
}]);
notePad.factory('loadNotes',['myNotes','$q',function(myNotes,$q){
    return function(){
        var defer = $q.defer();
        myNotes.query(function(notes){
            defer.resolve(notes);
        },function(err){
            defer.reject(err)
        });
        return defer.promise
    }
}]);
notePad.factory('loadNote',['myNotes','$q',function(myNotes,$q){
    return function(noteId){
        var defer = $q.defer();
        myNotes.get({id:noteId},function(note){
            defer.resolve(note);
        },function(err){
            defer.reject(err)
        });
        return defer.promise
    }
}]);
notePad.directive('notepad',['loadNotes','myNotes',function(loadNotes,myNotes){
    return {
        restrict:'EA',
        templateUrl:'template.html',
        scope:{},
        link:function(scope,iEle,iAttr){
            scope.editMode = false;
            scope.curText = '';
            scope.ifNew = true;
            loadNotes().then(function(data){scope.notes=data},function(data){});
            var editBox =  iEle.find('.edit');
            editBox.bind('keydown keyup',function(){
                scope.curText = $(this).html()
            });
            scope.editNote = function(id){
                scope.editMode = true;
                if(id != undefined){
                    scope.curText = scope.notes[id]['content']
                }
                else {
                    scope.curText = '';
                }
            };
            scope.saveNote = function(){
                scope.editMode = false;
                if(scope.ifNew){
                    var newNote = new myNotes();
                    newNote.content = scope.curText;
                    newNote.title = scope.curText.length>5 ? scope.curText.substring(0,5)+'...' : scope.curText;
                    newNote.id = scope.notes.length;
                    newNote.$mysave(function(data){console.log(data)})
                }
            }
        }
    }
}]);

内容比较多,只看关键部分代码:

1.myNotes服务通过$resource创建$resource()对象,然后给它添加自定义的mysave方法,设置isArray属性为false.

2.实例化一个newNote资源,然后调用自定义的$mysave方法

后台我们给它返回一个数组对象:

var notes = [{
    'title':'吃饭',
    'content':'吃饭啊',
    'id':0
},{
    'title':'睡觉',
    'content':'睡觉啊',
    'id':1
},{
    'title':'喂兔子',
    'content':'喂兔子啊',
    'id':2
}];
app.post('/notes/:id',function(req,res){
    var noteId = req.params.id;
    notes[noteId] = req.body;
    res.send(notes)
});

结果报错: 

这个很好理解,因为我们设置了isArray是false嘛.

然后我把isArray属性改为true:

结果还是报错:

百思不得其解后去看了angular-resource的源码,发现里面有这样一段:

var isInstanceCall = this instanceof Resource;
var value = isInstanceCall ? data : (action.isArray ? [] : new Resource(data));
if (action.isArray) {
                  value.length = 0;
                  forEach(data, function (item) {
                    if (typeof item === "object") {
                      value.push(new Resource(item));
                    } else {
                      // Valid JSON values may be string literals, and these should not be converted
                      // into objects. These items will not have access to the Resource prototype
                      // methods, but unfortunately there
                      value.push(item);
                    }
                  });
                }

注意这里的value对象,并非设置isArray为true时,它就是[],首先要求isInstanceCall是false,然后再判断isArray...

所以,这里的newNote是$resource()的实例,这样,isArray无论如何配置,它都不能接受数组格式的返回数据.并且必须配置为false.

所以这里应该这样做:

newNote.$mysave(function(data){console.log(data)})

//改为:

myNotes.mysave(newNote,function(data){console.log(data)});

不要使用资源实例的方法,而是直接使用$resource()的方法.这样就可以正确接收数组格式的返回值了.

angular这样设计,应该是符合RESTful架构风的(我猜的),因为提交一个资源,那么返回的也应该是一个资源,而不应该是整个数组,所以应该尽量避免这种做法.这里只是我自己做练习的时候遇到这样的情况.

完整代码参考: angular指令实战-notepad